更改bootstrap 3网格中的列顺序

Question

我有html如下,这是一个jsbin帖子.

我希望蓝色和红色div在xs大小上交换它们的位置.

    <div class="row">
       <div class="col-xs-12 col-sm-6" style="background-color:red;">
           red
       </div>
       <div class="col-xs-12 col-sm-6" style="background-color:blue;">
           blue
       </div>
   </div>

是否可以在bootstrap 3.0中更改移动大小的列顺序.

Answer 1

是的,这可以通过推拉类轻松完成.

首先,更改源顺序,使其按您希望它的最小尺寸顺序排列.所以,我把红色和蓝色的div换成了蓝色的第一个和红色的第二个.然后,您需要添加推拉类.你将推动蓝色柱子并拉动红色柱......等等

<div class="row">
       <div class="col-xs-12 col-sm-6 col-sm-push-6" style="background-color:blue;">
           blue
       </div>
       <div class="col-xs-12 col-sm-6 col-sm-pull-6" style="background-color:red;">
           red
       </div>
</div>