更改bootstrap 3网格中的列顺序

Question

我有html，如下This is a jsbin post。

我希望蓝色和红色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换成了蓝色的第一个和红色的第二个。然后，您需要添加推拉类。你将推动蓝色柱子并拉动红色柱......etvoilà

<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>

Answer 2

这里更改div的顺序并使用bootstrap http://jsbin.com/fowohuro/1/edit

中的pull-right类向右浮动它们