css - 移动版本上不同顺序的 Bootstrap

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) 布局。
一种选择是禁用 lg 的 flexbox .使用 float 这样 1,3 列自然会向右拉，因为 2 更高。 flex 盒 order-将在移动设备上工作。
https://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 上禁用 flex及以上

float-left禁用 flex 时 float 列

order-*启用 flex 时重新排序列

另一种选择是一些使用 w-auto 的 flexbox 包装技巧...
https://codeply.com/go/mKykCsBFDX

另见:
How to fix unexpected column order in bootstrap 4?
Bootstrap Responsive Columns Height
B-A-C -> A-B-C