responsive css, mobile div stack

Good people - Need a little 开发者_开发百科help. I am making a site that will be responsive, ie. it will scale down with css media queries. My problem is that I have two divs next to each other, and in the mobile version I want the red on top of the blue: http://barebente.com/test/responsive/

Resize browser window to about 400 to see what I mean. For some reason I cannot get them to stack the other way. This would give me content under the main menu, and the secondary menu (sidebar) below. Suggestions and help would be very much appreciated.

order the div for the red box first then the blue one. float: right the red one, and don't float the blue one.

with the CSS media queries, remove the float property from the red one.

this should cause them to stack as you want them to.