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

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.

现在在Bootstrap 4 Beta中,可以使用flexbox排序类"推"或"拉"列到下一个"行":

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