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

Kev*_*Sol 3 html css bootstrap-4

我一直在尝试获得如下所示的 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> 
Run Code Online (Sandbox Code Playgroud)

Zim*_*Zim 5

您需要禁用 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>
Run Code Online (Sandbox Code Playgroud)

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


有关的:

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

ABCD