Многорядная колонка с css flexbox

Question

Я пытаюсь создать сетку из 5 ячеек (делений), где первая имеет макет портрета, а остальные имеют половину высоты первой (скриншот ниже)

Мой HTML выглядит следующим образом:

<div class="container">
<div class="row">
<div class="col-md-4 portrait"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>

Было бы легко использовать float: left и display block, но я использую bootstrap 4, который использует flexbox, поэтому не поддерживает float leftи я не могу заставить его работать как положено.Есть ли способ сделать это даже с flexbox?

PS: у строки div есть flex-wrap: wrap;

Answer 1

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -webkit-flex-direction: column;
  height: 200px;
  justify-content: flex-start;
  
}

.col-md-4 {
  flex: 0 0 50%;
  -webkit-flex: 0 0 50%;
  background: green;
}

.portrait {
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%;
  background: blue;
 }

.red {
  background: red;
}

<div class="container">
<div class="row">
<div class="col-md-4 portrait"></div>
<div class="col-md-4 red"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4 red"></div>
</div>
</div>

Answer 2

Для достижения результатов, отображаемых на вашем изображении, вы можете использовать следующее.

  <div class="container">
  <div class="row">
    <div class="col-md-6 portrait">PUT YOUR PORTRAIT CONTENT HERE</div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6">TOP LEFT AFTER PORTRAIT</div>
        <div class="col-md-6">TOP RIGHT AFTER PORTRAIT</div>
      </div>
      <div class="row">
        <div class="col-md-6">BOTTOM LEFT AFTER PORTRAIT</div>
        <div class="col-md-6">BOTTOM RIGHT AFTER PORTRAIT</div>
      </div>
    </div>
  </div>
</div>

Это делается путем создания новой строки внутри col, которая сама находится внутри другой строки.