Bootstrap 网格：如何更改列的位置？

Question

我有一个关于我试图实现的引导网格系统的问题 - 到目前为止还没有成功。

我正在尝试执行以下网格系统：

我已经尝试了一个代码，您可以在这个 JSFiddle中找到它。

    <div class="container mt-5">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
          <h3>Bloc 1</h3>
        </div>
        <div class="col-lg-6 col-md-6 col-12 border bg-light">
          <h3>Bloc 2</h3>
        </div>
        <div class="col-lg-6 col-md-12 bg-danger">
          <h3>Bloc 3</h3>
        </div>
      </div>
    </div>

它适用于xs和md系统。 但是，我对lg版本有疑问，我找不到将 2 号集团（灰色）堆叠在 3 号集团（红色）之上的方法。 有没有办法改变这样一列的位置？ 如上图所示，区块编号 1 应位于页面底部。

非常感谢你的帮助！

Answer 1

基本上，您必须在灰色和红色 div 周围为第二列包装一个 div

<div class="container ">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
          <h3>Bloc 1</h3>
        </div>
        <div class="col-lg-6 col-md-6 col-12"><!--NEW DIV, moved column info here-->
          <div class=" border bg-light">
            <h3>Bloc 2</h3>
          </div>
          <div class=" bg-danger">
            <h3>Bloc 3</h3>
          </div>
        </div><!--new div end-->
      </div>
    </div>

您需要调整间距，但这是一个开始