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

Question

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

在大型设备上，我需要将搜索表单、CTA 和按钮广告放在一个 4 宽的垂直列中，而内容将占据右侧的所有空间(具有可变内容并能够根据需要向下增长)。

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

我将使用网格排序类来改变正常流程。但就目前而言，我被卡住了，无法为大型设备提供所需的布局。我试过的代码如下所示，但内容始终在其他元素下方而不是旁边。

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

我的代码(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) 并在较大屏幕宽度的列上使用 float 。然后使用 flexbox order-* 用于较小的/移动屏幕宽度。

<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://codeply.com/go/jfARR4GYE4

---

相关:

Bootstrap with different order on mobile version
https://codeply.com/go/mKykCsBFDX

A-B-C-D A-C-B-D