Bootstrap 4 grid - 3 stacked columns on left, 1 on right

Issue

I've been trying to get a Bootstrap 4 layout as shown below:

On large devices I need the Search Form, CTAs and Button ads to go in a vertical column 4 wide while the Content will occupy all the space on the right (with variable content and being able grow downwards as required).

For small devices, I want Search Form, CTAs, Content and Button ads to display in that order, taking 100% of screen width.

I'll use the grid ordering classes to alter the normal flow. But for now, I'm stuck and can't the desired layout for large devices. The code I've tried is shown below, but the Content is always below the other items instead of beside it.

This question seems to address this, but the push/pull classes are now gone?

My code (2 tries)

<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> 

Solution

You need to disable the flexbox (d-md-block) and use floats on the columns at larger screen widths. Then use flexbox order-* for smaller/mobile screen widths.

<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

---

Related:

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

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

Answered By - Zim