Bootstrap grid: How to change the place of a column?

Question

I have a question regarding a bootstrap grid system I am trying to achieve - and have not been successful so far.

I am trying to do the following grid system:

I have tried a code that you'll find with this 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>

It works well for xs and md system. However, I have issues with the lg version, where I don't find a way to stack the bloc number 2 (grey) on top of the bloc number 3 (red). Is there a way to change the place of such a column? As indicated on the figure above, the bloc number 1 should fall to the bottom of the page.

Thanks a lot for your help!

Answer 1

Basically, you have to wrap a div for a second column around the gray and red divs

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

You will need to work out the tweaks for spacing, but this is a start