Javascript 当窗口大小更改时，交互更改div的位置

我有两个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;}
       }

.wrap{宽度：85%；边距：自动；溢出：隐藏；}
.left{float:right；高度：250px；宽度：49%；背景：粉色；}
.right{float:left；高度：250px；边距底部：10px；宽度：49%；}
.right{背景：绿色；}
@介质和全部（最大宽度：400px）{
.left、.right{float:none；页边距底部：5px；高度：200px；}
}

---

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

.wrap{宽度：85%；边距：自动；溢出：隐藏；}
.left{float:right；高度：250px；宽度：49%；背景：粉色；}
.right{float:left；高度：250px；边距底部：10px；宽度：49%；}
.right.top{背景：绿色；}
@介质和全部（最大宽度：400px）{
.left、.right{float:none；页边距底部：5px；高度：200px；}
}

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

---

我已经更新了小提琴-

.wrap{宽度：85%；边距：自动；溢出：隐藏；}
.left{float:left；高度：250px；宽度：49%；背景：绿色；}
.right{float:right；高度：250px；边距底部：10px；宽度：49%；}
.right{背景：粉红色；}
@介质和全部（最大宽度：400px）{
.left、.right{float:none；页边距底部：5px；高度：200px；}
}

<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;}
}