How do I use flex to have a div aligned to the left spanning all the height, two divs to the right aligned to top and bottom within a background div?

So I have 4 divs, one of which is the parent acting as a "background" div, and 3 other divs inside of that one. I want to align the larger one to the left and have it span the full height of the div. I want to align the two smaller ones to the right with the first one on top and the second one on bottom. How could I achieve this with flex?

This is what I want:

Image may be NSFW.
Clik here to view.

This is the code I currently have:

.brown {    display: flex;    width: 300px;    height: 170px;    background: brown;}.yellow {    background: yellow;}.green {    background: green;}.blue {    background: blue;}<div class="brown"><div class="yellow"><div class="green"><div class="blue"></div>

I am also using bootstrap so if I could do this with only bootstrap util classes that would be awesome.

Thanks in advance!