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>

您需要調整間距，但這是一個開始