Css 移动版本上不同顺序的引导

我有2列和嵌套行在右边的列中，我如何使引导响应如下

布局：

desktop version
--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

mobile version (stacked in order)
--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

这是我的代码：

<div class="row">
   <div class="col-lg-4">
     <div class="row">
         <div class="col-lg-12">1
     </div>
      <div class="row">
         <div class="col-lg-12">3
     </div>
   </div>
   <div class="col-lg-8 order-lg-first">2
   </div>
</div>

1.
3.
2.

---

有了这段代码，移动版1 3 2中的顺序，我想要的是1 2 3。

您可以使用推拉来更改列的顺序。查看更多信息

B
A.
C

要在Bootstrap 4中实现这一点，您需要为“2”列使用

order lg first

类，为“3”列使用

offset-lg-8

类（假设它们在HTML中的顺序为1-2-3）

在大（

lg

）或更大的屏幕上，

offset-lg-8

类将第三列偏移8个单位（=与第二列的宽度相同），从而产生所需的结果

这是一个工作代码段（单击下面的“运行代码段”并展开到整个页面）：

1.
2.
3.

因为Bootstrap 4使用flexbox，列的高度总是相等的，您将无法获得所需的桌面（lg）布局

一个选项是禁用

lg

的flexbox。使用浮动，使1,3列自然向右拉，因为2更高。flexbox

订单-

将在手机上运行

2.
1.
3.

这是如何工作的

• 保持列在同一行中，因为排序是相对于父级的

• d-flex d-lg-block

  禁用flex on

  lg

  及以上功能
• 禁用flex时，

  向左浮动

  浮动列
• 启用flex时，

  order-*

  会对列重新排序

另一个选项是使用

w-auto

的flexbox包装技术

---

另请参见：

---

B-A-C->A-B-C

谢谢，但如果“2”的高度大于“1”，则桌面版的“1”和“3”之间会有空白。这有什么办法吗？（在桌面版本中，“3”始终位于“1”下）。谢谢你是说桌面上“2”的高度必须独立于其他div吗？如果第1列高于第2列，这就不起作用了。在这种情况下，3将位于2下方，1的左侧。关于如何解决这个问题，有什么建议吗？请回答我自己的问题，添加

向右浮动

，而不是向左浮动到3，以便在2小于1时将其保留在右侧。

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>