It seems quite obvious, but I can't seem to find a solution.
I have two divs that I want stacked on top of each other when the screen width is small, and placed next to each other when it's large. The right div has a fixed width, while the left one has a variable width. However, when the screen width is small, they appear in the wrong order. If I switch the order of the divs in the HTML, they no longer align properly.
Here is the fiddle link: 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%;}
}