How to position div's like this with CSS?

Trying to maintain an space between them, I'd like to position some divs in a specific form for my website, and then add content to them. I have been styling the pages responsively, so I would like to know if position those divs this way with responsiveness is posible. The result I guess it could be something like this:

Being X and Y the two div's I've already created (for the header and the menu) and Z the footer. The div's I'd like to put in those positions are those DIV 1, DIV 2 and DIV 3.

For the moment the two main parts above (header and menu) are styled like this:

<div class="container">
<div class="info">
Info<br>
2 lines
</div>
<div class="about">
About<br>
in<br>
3 lines
</div>
<div class="wrapper">
<div class="content-left">
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
Left take all the rest of the space
</div>
<div class="wrapper-inner">
<div class="content-right-top">
Right - Top
Right - Top
Right - Top
Right - Top
Right - Top
Right - Top
Right - Top
Right - Top
</div>
<div class="content-right-bottom">
Right - Bottom
Right - Bottom
Right - Bottom
Right - Bottom
Right - Bottom
Right - Bottom
Right - Bottom
</div>
</div>
</div>
<div class="footer">
Footer<br>
has 2 lines
</div>
</div>