这种布局是否可以仅使用 flexbox 或 bootstrap？答案

【问题标题】：Is this kind of layout possible with only flexbox or bootstrap?这种布局是否可以仅使用 flexbox 或 bootstrap？
【发布时间】：2019-04-02 21:15:04
【问题描述】：

附上你可以看到我正在尝试做的事情的图像。是否可以只使用 flexbox 和 bootstrap4？

编辑：我尝试过的：https://codepen.io/anon/pen/MRwaJL

 <div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-4">
            <div class="right-div">
            </div>
        </div>
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-4">
            <div class="right-div">
            </div>
        </div>
    </div>
 </div>
.left-div {
  background-color: aquamarine;
  min-height: 50px;
  margin-bottom: 20px;
}

.right-div {
  background-color: darkgray;
  min-height: 100px;
}

【问题讨论】：

是的，请发布您迄今为止尝试过的标记
可以使用flexbox 或grid 和bootstrap-4。添加到目前为止您尝试过的代码
已编辑以包含代码。

标签： css html flexbox bootstrap-4

【解决方案1】：

Bootstrap 4 使用 flexbox，因此每行中的列高度相同。桌面布局可以通过嵌套 2 个外列来实现。但是，要更改列的顺序/位置，就像移动设备一样，列必须全部位于同一 .row...

因此，您可以使用d-block“禁用”md 和更大的弹性框类以及浮动实用程序类。在较小的移动宽度上，flexbox 行为将重新启动，order-* 类可用于定位列。

<div class="container">
    <div class="row d-md-block">
        <div class="col-md-8 order-1 float-left">1</div>
        <div class="col-md-4 order-3 float-right">3</div>
        <div class="col-md-8 order-2 float-left">2</div>
        <div class="col-md-4 order-5 float-right">5</div>
        <div class="col-md-8 order-4 float-left">4</div>
    </div>
</div>

https://www.codeply.com/go/5z7096wfGO

【讨论】：

谢谢！这是向前迈出的一步，但我还需要其他行......添加另一个“行”不起作用，因为第一行并没有占据它的孩子的所有高度。
这个问题没有提到更多的行或列。它只显示您现在有答案的 5 ;-) .. 这是仅使用 Bootstrap 4 的方式
将 .clearfix 添加到第一行可以解决它。谢谢！
.container {display: grid;} 的声明在这里可以很好地工作。