CSS responsive float left and right (change which div goes on top)?

Question

I'm working on this page: http://www.insidemarketblog.com/test-4/

You'll see that the word "test" is in the div floated left, and the image is in the div floated right.

If you resize it, you'll see the div floated left goes on top, and the div floated right goes below.

How can you invert that order? So that the div floated left goes BELOW the div floated right. Nothing I do seems to work.

HTML:

<div class="main_header">
<div class="banner_left">
<p>test</p>
</div>
<div class="banner_right">
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg">
</div>
</div>

CSS:

.main_header {
    background: none repeat scroll 0 0 #2B3443;
    border: 1px solid #FFFFFF;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
}
.banner_left {
    float: left;
}
.banner_right {
    float: right;
}

Answer 1

You can swap the order of the HTML tags to achieve the desired effect.

Change this:

<div class="main_header">
<div class="banner_left">
<p>test</p>
</div>
<div class="banner_right">
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg">
</div>
</div>

To this:

<div class="main_header">
<div class="banner_right">
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg">
</div>
<div class="banner_left">
<p>test</p>
</div>
</div>