Flexbox spanning a row - html

Question

I am new to flex box. I thought of creating a structure like this
I tried to create this but the last <div> d is always coming in a different row
http://codepen.io/srajagop/pen/wzyNVL
body {
margin: 0;
}
.foo {
display: flex;
flex-wrap: wrap;
flex-direction: row;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-webkit-flex-direction: row;
height: 400px;
}
.a, .d {
flex: 0 0 50%;
background: green;
height: 200px;
}
.b,.c {
flex: 0 0 25%;
height: 400px;
background: blue;}
.c {
background: red;}
.d {
background: grey;
}
How to solve this?

Answer 1

I wouldn't add a margin top property like the above answer. What you really need is a nested flex container, where you have a row flex container surrounding all items, then a column flex container surrounding a and b. Here is a snippet that generally outlines the idea:
.row,
.col {
display: flex;
}
.row {
flex-direction: row;
height: 400px;
}
.col {
flex: 0 0 50%;
flex-direction: column;
}
.a,
.b {
flex: 0 0 50%;
}
.a {
background-color: green;
}
.b {
background-color: red;
}
.c,
.d {
flex: 0 0 25%;
}
.c {
background-color: blue;
}
.d {
background-color: yellow;
}
<div class="row">
<div class="col">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="c"></div>
<div class="d"></div>
</div>

Answer 2

Used the margin-top property. Seems working.
body {
margin: 0;
}
.foo {
display: flex;
flex-wrap: wrap;
flex-direction: row;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-webkit-flex-direction: row;
height: 400px;
}
.a,
.d {
flex: 0 0 50%;
background: green;
height: 200px;
}
.b,
.c {
flex: 0 0 25%;
height: 400px;
background: blue;
}
.c {
background: red;
}
.d {
background: grey;
margin-top: -200px;
}
<div class="foo">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>