DIV 2 on top of DIV 1 when resizing

So, this is how it looks like when I'm on full screen: https://i.sstatic.net/ixgGS.png
And this is how I would like to look when I resize to a certain point: https://i.sstatic.net/NfgNR.png

I'm only able to have div 1 on top of div 2. I tried everything I know but I'm afraid that my knowledge is a little bit limited when it comes to this kind of challenges. I would really appreciate if anyone could help me.

Solution

I think you can achieve what you're looking for with a CSS grid like Bootstrap has. Check the following fiddle: http://jsfiddle.net/nunoarruda/156trje7/

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-sm-push-6 div2">DIV 2</div>
        <div class="col-xs-12 col-sm-6 col-sm-pull-6 div1">DIV 1</div>
    </div>
</div>

I've used the Bootstrap CSS grid and the push/pull classes to reorder the columns beginning from small (sm) screens. You can change it to medium (md) or bigger. Check the Bootstrap documentation for that: http://getbootstrap.com/css/#grid-column-ordering