Bootstrap 4-堆叠2列，右侧有1个大列 [英] Bootstrap 4 - Stack 2 columns with 1 large column on the right

问题描述

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

I'm trying to use bootstrap 4 and perhaps flexbox to achieve the following:

小屏幕:

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

大屏幕:

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

到目前为止我所拥有的: https://jsfiddle.net/aq9Laaew/180926/
我尝试使用order- *和align-self-stretch，但是它们没有给出期望的结果. (我正在寻找行距之类的东西)

What I have so far: https://jsfiddle.net/aq9Laaew/180926/
I've tried to play around with order-* and align-self-stretch but they don't give the desired result. (I'm looking for something like rowspan)

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

Extra details that might be important:
The height of column 2 is 68px on small screens and 140px on larger screens (breakpoint for larger is 992px and up)

推荐答案

我在这里回答了类似的问题:
如何在引导程序4中修复意外的列顺序?

I've answered a similar questions here:
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-*.

You need to override the flexbox on the row to get the taller column to float right. This can be done using d-md-block on the row, and the float-* on the columns.

<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个大列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！