引导程序通过右拉、左拉在 3 列上更改 div 顺序

Question

我一整天都在研究这个问题，但没有找到解决方案。我在一个容器中有一排 3 列。

1：右侧内容 – 向右拉

2：导航 – 向左拉

3：主要内容

大屏幕上的外观：

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

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

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

现在的样子：

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

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

Answer 1

引导程序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]-*

）改变显示顺序。您将第一列推倒第二列的量，然后将第二列拉动第一列的量。

Answer 2

试试这个...

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

引导层

Answer 3

我知道这是一个非常老的问题，但对于最新的 BS 5，可以在这里找到：https://getbootstrap.com/docs/5.0/layout/columns/#offsetting-columns使用偏移类。