css - 更改 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 交换为蓝色第一，红色第二。然后，您需要添加推送和拉取类。你将插入蓝色柱子并拉动红色柱子......瞧瞧

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