Bootstrap making one col equal the height of two cols

Question

I am trying to make the column on the right the same height as the two on the left. I know I could do this by wrapping each side into a column of its own, But as the window gets smaller I would like to keep them in the order that they are now. If I put them into a col of their own then the col on the right will go to the bottom and not the middle.

I have looked through the bootstrap documentation but I don't think they've added this feature. Do you know of anyway that this would be possible? It doesn't have to be bootstrap but has to be compatible with most modern browsers.

Here's an example

.container div{
  border: 1px solid black;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-4">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,quis ultrices lectus magna ut ipsum.</div>

    <div class="col-sm-12 col-md-8">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
      auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
      quis ultrices lectus magna ut ipsum.Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper.
      Donec sodales dignissim massa eget commodo. Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis
      sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac
      laoreet tincidunt, leo tellus venenatis est, quis ultrices lectus magna ut ipsum.</div>
      
    <div class="col-sm-12 col-md-4">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
      auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
      quis ultrices lectus magna ut ipsum.</div>
  </div>
</div>

Answer 1

For cases where you want simultaneous vertical and horizontal alignment, you can use CSS Grid Layout. This allows you to define a 2D grid and place elements onto that grid. I haven't read into Bootstrap 4 enough to see if it has innate support for grid layout, but here's a small demo. I leave it as an exercise to you to make it responsive for small screens.

.content {
  padding: 0.5rem;
  margin: 2px;
}

.top {
  border: 1px solid red;
}

.middle {
  border: 1px solid blue;
}

.bottom {
  border: 1px solid green;
}

.row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr;
}

.middle {
  grid-column: 2;
  grid-row: 1 / span 2;
}

<div class="container">
  <div class="row">
    <div class="content top">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,quis ultrices lectus magna ut ipsum.</div>

    <div class="content middle">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
      auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
      quis ultrices lectus magna ut ipsum.Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper.
      Donec sodales dignissim massa eget commodo. Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis
      sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac
      laoreet tincidunt, leo tellus venenatis est, quis ultrices lectus magna ut ipsum.</div>
      
    <div class="content bottom">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
      auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
      quis ultrices lectus magna ut ipsum.</div>
  </div>
</div>