Question

我有以下6个构建块：

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

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

唯一的问题是，我想交换第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

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

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

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

1 个答案: