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

只需交换两个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 2

像这样更改.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/

Answer 3

我更新了小提琴 - 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;}
}