html - 間違った順序を与えるメディア クエリを使用したサイド バイ サイド Div

Question

これは非常に明白だと確信しています...しかし、私はそれを理解できないようです。

メディアの幅が小さい場合は上下に、大きい場合は横に並べる必要がある 2 つの div があります。右が固定幅、左が可変幅です。ただし、メディアの幅が小さいと、順番がずれてしまいます。html の div を交換すると、うまく整列しなくなります。

これがフィドルです。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%;}
}