Twitter Bootstrap 3 - 在超小型设备上交换列 [重复]答案

【问题标题】：Twitter Bootstrap 3 - Swap columns on extra-small devices [duplicate]Twitter Bootstrap 3 - 在超小型设备上交换列 [重复]
【发布时间】：2014-12-31 13:59:24
【问题描述】：

我在 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，但结果很奇怪，列完全脱离网格。 如何使用引导程序的类交换它们？我希望这仅在 xs 分辨率上发生。

【问题讨论】：

您不能使用col-*-push-#/col-*-pull-# 类来实现这一点。看看：stackoverflow.com/questions/25714852/… 另外，如果不考虑支持 IE9-，您可以使用 flexbox 布局 并使用 order 属性。
对不起，重复的帖子，我写了一个模糊的搜索短语，这就是为什么我没有看到我之前发布的问题。我想我现在应该删除这个问题。
不用担心.. 没关系。最好不要删除问题，因为其他人可能会从搜索引擎的结果中找到它。

标签： html css twitter-bootstrap grid-layout

【解决方案1】：

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

按照您在移动设备上的要求更改标记的顺序 -- 移动优先

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

【讨论】：