can i have a multi-height bootstrap grid layout?

Question

I have a layout I am trying to achieve.

Col 1 | Col 2 | Col 3

Col 2 is "col-md-6 col-lg-6" and Col 1 and Col 3 are "col-md-3 col-lg-3" respectively

I want something like this:

However I end up with everything on one side like this:

And if I try and use pull or push classes I end up with unwanted spaces:

Here is some sample code that is close to what I have:

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    content1
  </div>
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    content2
  </div>
  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    content3
  </div>
  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    content4
  </div>
  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    content5
  </div>
</div>

Thanks in advance!

Answer 1

Try this way to get the first image like result

<div class="container">
      <div class="row">
        <div class="col-3">
          <div class="bg-danger">1</div>
          <br />
          <div class="bg-danger">2</div>
        </div>
        <div class="col-6">
          <div class="bg-danger">3</div>
        </div>
        <div class="col-3">
          <div class="bg-danger">4</div>
          <br />
          <div class="bg-danger">5</div>
        </div>
      </div>

Or another way to put columns inside a column

      <div class="row">
        <div class="col-3">
          <div class="row">
            <div class="col-12">
                <div class="bg-danger">1</div>
            </div>
            <div class="col-12">
                <div class="bg-danger">1</div>
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="bg-danger">3</div>
        </div>
        <div class="col-3">
            <div class="row">
              <div class="col-12">
                  <div class="bg-danger">1</div>
              </div>
              <div class="col-12">
                  <div class="bg-danger">1</div>
              </div>
            </div>
        </div>
      </div>
    </div>

and to control height you can use That will make all elements with the same height. and don't put it if you want the height to be as the content of each column.

.row {
display: flex;
align-items: stretch;
}