Left-floated div place below another div

Left-floated div place below another div

I have two divs whereas (div 1) is floated left while (div 2) is floated
right. I am creating a responsive layout where when the viewport changes,
(div 1) will go under (div 2). I created a simple image via MS Paint for
an easier illustration and also some code. Also, both contain dynamic
content so their heights must not be fixed.
No javascript (if possible) just plain CSS. I only know how to put div 2
under div 1 but not the other way around.
Does anyone know how I could achieve this?

HTML:
<div id="div1" style="float: left;">
//dynamic content
</div>
<div id="div2" style="float: right;">
//dynamic content
</div>