html - 在桌面和移动 View 上重新排序 Bootstrap 列

Question

基本上，我希望在移动设备上时右侧边栏上的某个列(搜索)位于顶部，并且在桌面 View 上仍然保留右侧边栏。

这就是我到目前为止所拥有的..

<div class="container">
    <div class="col-md-3 col-md-push-9">B</div>
    <div class="col-md-9 content col-md-pull-3">A</div>
    <div class="col-md-3 col-md-push-9">C</div>
</div>

在移动设备上看起来像这样(这就是我想要的)

| B |
| A |
| C |

但是，在桌面上，它看起来像这样(B和C之间有一个我不想要的间隙)

| A | B |
| A |   |
|   | C |

其外观如下:http://www.codeply.com/go/guzmu84ybo

有什么想法吗？

Answer 1

Working Codeply Solution

尽管 flexbox 可能是解决此流程问题的最现代方法，但有些人可能正在寻找简单的“Bootstrappy”解决方案或可在 IE10+ 中工作的解决方案。单个媒体查询即可解决您的问题，您可以删除所有 push/pull 类。您可以将标记简化为:

<div class="container">
    <div class="row">
        <div id="searchWrap" class="col-md-3">B</div>
        <div class="col-md-9 content">
            <p>Lorem Ipsum... This content can be long now... </p>
        </div>
        <div class="col-md-3">C</div>
    </div>
</div>

然后，您的 CSS 中需要这个单一媒体查询来有效地“重置”导致所有问题的 left 属性:

@media (min-width : 992px) { 
    #searchWrap { 
        float: right;
        left: 0px; 
    }
}

您可以将 992px 更改为您希望搜索流向顶部的任意宽度。但 992px 是 Bootstrap 3 网格中“平板电脑宽度”的宽度，并且很可能是发生这种重新流动的适当宽度。 (查看所有 Bootstrap 3 网格宽度 here 。)