Twitter Bootstrap 3 - 在超小型设备上交换列

Question

我在Twitter引导程序中有两列，它们看起来像这样：

<div class="col-md-4 col-sm-6 col-xs-12">
   <div class="post">
      Something here
   </div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12">
   <div class="post">
      Something here
   </div>
</div>

在xs分辨率下它完全缩小到全宽，但我想将这两列互相交换，这样代码中的第二列就是显示的第一列并且代码中的第一列将是显示的第二列。

我尝试使用col-xs-pull-12和col-xs-push-12，但它给了我奇怪的结果，列完全偏离网格。 如何使用bootstrap的类交换它们？我希望这只在xs解析时发生。

Answer 1

您需要以正确的方式使用pull和push ....这适用于较大的设备：

1. 在移动设备上更改您想要的标记顺序 - 首先移动

2. 添加push和pull以更改大型设备上的订单

   <div class="col-md-8 col-md-push-4 col-sm-6 col-sm-push-6 col-xs-12">
      <div class="post">
         Something here Now
      </div>
   </div>
   <div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6 col-xs-12">
      <div class="post">
         Something here 
      </div>
   </div>
   

选中 BottplyDemo