我有以下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]
解决方法
你是对的,没有办法推到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>
更新Bootstrap 4.x.
现在使用flexBox订购类在Bootstrap 4 Beta it’s possible to “push” or “pull” columns to the next “row”中：