在移动版本上以不同顺序引导

Question

我有2列和右列中的嵌套行，如何使Bootstrap响应如下，

布局：

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 2 3。

Answer 1

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

一种选择是禁用的flexbox lg。使用浮点数，以使1,3列自然向右拉，因为2更高。Flexbox order-将在移动设备上运行。

https://www.codeply.com/go/8lsFAU3C5E

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

如何运作

• 将列保持在同一行中，因为顺序是相对于父级的
• 在d-flex d-lg-block禁止弯曲的lg和最多
• 该float-left浮动时，Flex是禁用的列
• 在order-*重新排序列弯曲时启用

另一个选择是一些使用w-auto...

https://www.codeply.com/go/mKykCsBFDX

另请参阅：
如何在引导程序4中修复意外的列顺序？
Bootstrap响应列高度

BAC-> ABC