在屏幕尺寸上更改div顺序

Question

<div class="first"></div>
<div class="second"></div>

我试着用CSS这样做对其进行更改float:left与float:right和下扭转它@media (max-width:820px),我相信在过去的工作,但没有工作的查询.

尝试了一个简单的JQuery:

if ($(window).width() < 820) {
   $( ".first" ).insertAfter( $( ".second" ) );
}
else {
   $( ".first" ).insertBefore( $( ".second" ) );
}

我知道这应该是如此简单,但它不是在打球,我做错了什么？

Answer 1

您是否尝试过Flexbox订购？

.container {
  display: flex;
}

.container > div {
  display: block;
  padding: 1em 0;
  flex: 1;
  background-color: red;
}

@media (max-width: 800px) {
  .first {
    order: 2;
  }
}

<div class="container">
  <div class="first">first</div>
  <div class="second">second</div>  
</div>

https://jsfiddle.net/xgkpfgc5/1/