Inter在窗口大小變化時更改div的位置

Question

我有2個div。其實在窗的全寬，它就像

而當窗口重新調整大小，我得到了

但實際上，我要像

如何輸出我重寫我的CSS（或任何jQuery爲此）爲了得到這個把

<div class="wrap"> 
<div class="right"></div> 
<div class="left"></div> 

</div> 
.wrap {width: 85%; margin: auto; overflow: hidden;} 
.left {float: right; height: 250px; width: 49%; background: pink;} 
    .right {float: left; height: 250px; margin-bottom: 10px; width: 49%;} 
    .right {background: green;} 
    @media all and (max-width: 400px) { 
    .left, .right {float: none; margin-bottom: 5px; height: 200px;} 
     } 

http://jsfiddle.net/deKMy/1/

Answer 1

我已經更新了小提琴 - http://jsfiddle.net/deKMy/2/

<div class="wrap"> 
    <div class="right"></div> 
    <div class="left"></div> 

</div> 


.wrap {width: 85%; margin: auto; overflow: hidden;} 
.left {float: left; height: 250px; width: 49%; background: green;} 
.right {float: right; height: 250px; margin-bottom: 10px; width: 49%;} 
.right {background: pink;} 
@media all and (max-width: 400px) { 
    .left, .right {float: none; margin-bottom: 5px; height: 200px;} 
} 

Answer 2

只是交換了兩個div：

<div class="wrap"> 
    <div class="left"></div> 
    <div class="right top"></div> 
</div> 

.wrap {width: 85%; margin: auto; overflow: hidden;} 
.left {float: right; height: 250px; width: 49%; background: pink;} 
.right {float: left; height: 250px; margin-bottom: 10px; width: 49%;} 
.right.top {background: green;} 
@media all and (max-width: 400px) { 
    .left, .right {float: none; margin-bottom: 5px; height: 200px;} 
} 

Answer 3

變化的.css這樣。

.wrap {width: 85%; margin: auto; overflow: hidden;} 
.left {float: left; height: 250px; width: 49%; background: pink;} 
.right {float: right; height: 250px; margin-bottom: 10px; width: 49%;} 
.right.top {background: green;} 
@media all and (max-width: 400px) { 
    .left, .right {float: none; margin-bottom: 5px; height: 200px;} 
} 

http://jsfiddle.net/ayiem999/XgLC5/