Multirow column with css flexbox - css

Question

I'm trying to make a grid of 5 boxes (divs) where the first one has a portrait layout, and the rest have half the height of the first one (screenshot below)
My HTML looks like this:
<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>
It would have been easy using float:left and display block, but i'm using bootstrap 4 which uses flexbox so no support for float left and i can't get it to work as expected. Is there a way to do this even with flexbox ?
PS: the row div has 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

You can use the following to achieve the results displayed in your image.
<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>
This is done by creating a new row, inside of a col, which is itself inside of another row.