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

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>