【问题标题】：Bootstrap change div order with pull-right, pull-left on 3 columnsBootstrap 更改 div 顺序，在 3 列上向右拉、向左拉
【发布时间】：2013-11-24 14:29:54
【问题描述】：

我整天都在研究这个问题，但没有想出解决方案。我在一个容器的一行中有 3 列。

1：正确的内容——向右拉

2：导航——向左拉

3：主要内容

它在大屏幕上的样子：

------------------------------------------------
|   Menu  |      Content      |  Right Content |
------------------------------------------------

它在小屏幕上应该是什么样子：

----------------------------
|  Menu  |  Right Content  |
|        |------------------
|        |  Content        |
----------------------------

现在的样子：

------------------
| Right Content  |
------------------
| Menu | Content |
------------------

我认为这只是一个简单的浮动问题。但我尝试了几乎所有的可能性。

【问题讨论】：

标签： css twitter-bootstrap css-float twitter-bootstrap-3

【解决方案1】：

试试这个...

<div class="row">
    <div class="col-xs-3">
        Menu
    </div>
    <div class="col-xs-9">
        <div class="row">
          <div class="col-sm-4 col-sm-push-8">
          Right content
          </div>
          <div class="col-sm-8 col-sm-pull-4">
          Content
          </div>
       </div>
    </div>
</div>

Bootply

【讨论】：

不需要col-sm-X 和col-md-X。如果您将网格设置为 sm，它将保持在 md 的位置。
此外，您应该始终将列包裹在 row 中，这样它会修剪第一列和最后一列的排水沟。请参阅bootply.com/93628 以获得直观的解释。

【解决方案2】：

引导程序 3

使用 Bootstrap 3 的网格系统：

<div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

工作示例：http://bootply.com/93614

说明

首先，我们设置了两列，无论屏幕分辨率如何 (col-xs-*) 都将保持不变。

接下来，我们将较大的右侧列分成两列，它们在平板电脑大小的设备和更低的设备上会相互重叠 (col-md-*)。

最后，我们使用匹配类 (col-md-[push|pull]-*) 改变显示顺序。您将第一列推过第二列的数量，然后将第二列拉出第一列的数量。

【讨论】：