大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap-3 – 使用col-md-push- *将列推送到下一行，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
[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]
但是,如果你认为“移动优先”,你首先要创建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”中：
以上是大佬教程为你收集整理的twitter-bootstrap-3 – 使用col-md-push- *将列推送到下一行全部内容，希望文章能够帮你解决twitter-bootstrap-3 – 使用col-md-push- *将列推送到下一行所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。