Question

我正在尝试使用Bootstrap 4和Flexbox来实现以下目标：

小屏幕：

from pandas.io import data, wb # becomes
from pandas_datareader import data, wb

大屏幕：

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

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

其他可能很重要的详细信息：
在小屏幕上，第2列的高度为68px，在大屏幕上，第2列的高度为140px（大屏幕的断点为992px以上）

Answer 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

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

1 个答案: