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

i'm trying make layout following image using css flexbox.

but i'm not familiar flexbox can me make this?

here 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 :)

option 1

set flex container wrap.

make each flex item take 50% of space. adjust margins calc.

the third item, forced wrap, gets flex-grow: 1, 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 flex container wrap.

give each flex item enough width allow 2 per row.

give each item ability 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>