css – Bootstrap：使用pull-right,pull-left/3列更改div顺序

我一直在这一整天的工作，但不提出一个解决方案。我在容器中的一行中有3列。

1：正确的内容 – 拉右

2：导航 – 拉左

3：主要内容

它在大屏幕上看起来：

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

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

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

现在的样子：

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

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

解决方法

引导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] – *)来移动显示顺序。你推第一列超过第二个的数量，并拉第二个数量的第一个。