Side by Side Divs with a Media Query giving the wrong order

Side by Side Divs with a Media Query giving the wrong order

Am sure this is very obvious... but I can't seem to figure it out.
I have two divs that I need above one another when the media width is
small, and beside each other when large. The right one is fixed width, and
the left is variable. However, when I use floats they end up in the wrong
order. If I swap around the divs in the html, they no longer line up
nicely.
Here is the fiddle. http://jsfiddle.net/CwMTU/2/
HTML
<div class="right"> right content fixed width </div>
<div class="left"> left navbar variable width </div>
CSS
.right {
width: 200px;
float: right;}
.left{
margin-right: 200px;}
@media (max-width: 500px) {
.left {
width: 100%;}
.right {
width: 100%;}
}