使用 col-md-push-* 将列推送到下一行

Question

我有以下 6 个构建块：

[1][2] 
[3][4]
[5][6]

所有块在一行中都有一个 col-sm-6 类。 但是由于块 3 超过了引导程序的 12 列结构，它将跳转到下一行。 完美就是我想要的。

唯一的事情是，我想交换块 2 和 3。 但它只适用于同一行的块。 所以 1 和 2 可以交换，但 2 和 3 不能（在 SM 模式下）

 <div class="container">
 <div class="row">
    <div class="col-sm-6 col-md-4">  
        <div class="well"> 1 </div>
    </div>
    <div class="col-sm-6 col-sm-push-6 col-md-4 col-md-push-0">
        <div class="well"> 2 </div>
    </div>
    <div class="col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-0">
        <div class="well"> 3 </div>
    </div>

    <div class="clearfix hidden-sm"></div>

    <div class="col-sm-6 col-md-4">
        <div class="well"> 4 </div>
    </div>
    <div class="col-sm-6 col-md-4">
        <div class="well"> 5 </div>
    </div>
    <div class="col-sm-6 col-md-4">
        <div class="well"> 6 </div>
    </div>
</div>
</div>

它将创建：

    [1]   [2]
 [3]   [4]
    [5][6]

看 http://www.bootply.com/127062

Answer 1

你是对的，在 Bootstrap 3.x 中没有办法下推到下一行。

但是，如果您认为“移动优先”，您将首先创建 sm 布局，然后为更大的屏幕相应地推/拉它。..

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">  
            <div class="well"> 1 </div>
        </div>
        <div class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4">
            <div class="well"> 3 </div>
        </div>
        <div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4">
            <div class="well"> 2 </div>
        </div>

        <div class="clearfix hidden-sm"></div>

        <div class="col-sm-6 col-md-4">
            <div class="well"> 4 </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> 5 </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> 6 </div>
        </div>
    </div>
 </div>

http://www.bootply.com/127076

更新 Bootstrap 4.x

现在在 Bootstrap 4 Beta it's possible to "push" or "pull" columns to the next "row" 中使用 flexbox 排序类：

https://www.codeply.com/go/MELnKiqofA