Bootstrap 4 - 堆叠 2 列，右侧有 1 个大列答案

【问题标题】：Bootstrap 4 - Stack 2 columns with 1 large column on the rightBootstrap 4 - 堆叠 2 列，右侧有 1 个大列
【发布时间】：2019-02-02 05:05:48
【问题描述】：

我正在尝试使用 bootstrap 4 或者 flexbox 来实现以下目标：

小屏幕：

|                 |            |
|        1        |      2     |
|                 |            |
|______________________________|
|                              |
|                              |
|               3              |
|                              |

大屏幕：

|                 |            |
|        1        |            |
|                 |            |
|_________________|      2     |
|                 |            |
|                 |            |
|        3        |            |
|                 |            |

到目前为止我所拥有的：https://jsfiddle.net/aq9Laaew/180926/
我尝试过使用 order-* 和 align-self-stretch ，但它们没有给出预期的结果。（我正在寻找类似rowspan的东西）

可能很重要的额外细节：
第 2 列的高度在小屏幕上为 68px，在大屏幕上为 140px（较大的断点为 992px 及以上）

【问题讨论】：

标签： flexbox bootstrap-4

【解决方案1】：

我在这里回答了类似的问题：
How to fix unexpected column order in bootstrap 4?
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4

您需要覆盖行上的 flexbox 以使较高的列向右浮动。这可以在行上使用 d-md-block 并在列上使用 float-* 来完成。

<div class="container">
  <div class="row d-md-block">
    <div class="col-9 border float-left">
      1 of 3
    </div>
    <div class="col-3 border taller float-right">
      2 of 3
    </div>
    <div class="col-12 col-md-9 border">
      3 of 3
    </div>
  </div>
</div>

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

【讨论】：