Bootstrap 4 网格 - 左侧 3 个堆叠列，右侧 1 个

Question

我一直在尝试获得如下所示的 Bootstrap 4 布局：

在大型设备上，我需要搜索表单、CTA 和按钮广告进入垂直列 4 宽，而内容将占据右侧的所有空间（内容可变且能够根据需要向下增长）。

对于小型设备，我希望搜索表单、CTA、内容和按钮广告按该顺序显示，占据屏幕宽度的 100%。

我将使用网格排序类来改变正常流程。但是现在，我被困住了，无法为大型设备提供所需的布局。我试过的代码如下所示，但内容总是在其他项目的下面而不是在它旁边。

这个问题 似乎解决了这个问题，但是推/拉类现在消失了？

我的代码（2 次尝试）

<div class="row align-items-start">

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: red;"></div>
  </div> 

  <div class="w-100"></div>

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: blue;"></div>
  </div> 

  <div class="w-100"></div>

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: green;"></div>
  </div> 

  <div class="w-100"></div>

  <div  class="col-md-8 offset-md-4">
    <div style="height:50px;width:100%;background-color: yellow;"></div>
  </div> 

</div> 






<div class="row ">

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: red;"></div>
  </div> 

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: blue;"></div>
  </div> 

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: green;"></div>
  </div> 

  <div style='float:right;' class="col-md-8 offset-md-4">
    <div style="height:50px;width:100%;background-color: yellow;"></div>
  </div> 

</div> 

Answer 1

您需要禁用 flexbox (d-md-block) 并在较大屏幕宽度的列上使用浮动。然后将 flexboxorder-*用于较小/移动屏幕宽度。

<div class="container-fluid">
    <div class="row d-md-block">
        <div class="col-md-4 float-left">
            <div style="height:50px;width:100%;background-color: red;">A</div>
        </div>
        <div class="col-md-8 float-right order-1">
            <div style="height:150px;width:100%;background-color: green;">C</div>
        </div>
        <div class="col-md-4 float-left order-0">
            <div style="height:50px;width:100%;background-color: blue;">B</div>
        </div>
        <div class="col-md-4 float-left order-last">
            <div style="height:50px;width:100%;background-color: yellow;">D</div>
        </div>
    </div>
</div>

https://www.codeply.com/go/jfARR4GYE4

有关的：

移动版本上不同顺序的 Bootstrap
https://codeply.com/go/mKykCsBFDX

ABCD