Flexbox grid: two equal length rows, top row split into two columns - html

Question

I'm trying to make a layout like the following image using css flexbox.
But I'm not much familiar with flexbox anyone can help me to make this?
Here is what I'm trying:
.row.flex {
display: flex;
}
.row [class=^"col-"] {
width: 200px;
height: 100%;
}
<div class="row flex">
<div class="col-xs-12 col-sm-6">
</div>
<div class="col-xs-12 col-sm-6">
</div>
<div class="col-xs-12 col-sm-12">
</div>
</div>
thanks :)

Answer 1

Option 1
Set the flex container to wrap.
Make each flex item take 50% of the space. Adjust for margins with calc.
The third item, which is forced to wrap, gets flex-grow: 1, so it consumes remaining space.
.row.flex {
display: flex;
flex-wrap: wrap;
}
.row [class^="col-"] {
flex: 0 0 calc(50% - 10px);
height: 100px;
margin: 5px;
background-color: lightgreen;
}
.row [class^="col-"]:last-child {
flex-grow: 1;
}
<div class="row flex">
<div class="col-xs-12 col-sm-6"></div>
<div class="col-xs-12 col-sm-6"></div>
<div class="col-xs-12 col-sm-12"></div>
</div>
Option 2
Set the flex container to wrap.
Give each flex item just enough width to allow only two per row.
Give each item the ability to consume remaining space.
.row.flex {
display: flex;
flex-wrap: wrap;
}
.row [class^="col-"] {
flex: 1 0 35%;
height: 100px;
margin: 5px;
background-color: lightgreen;
}
<div class="row flex">
<div class="col-xs-12 col-sm-6"></div>
<div class="col-xs-12 col-sm-6"></div>
<div class="col-xs-12 col-sm-12"></div>
</div>