如何使用媒体查询重新排序HTML？

Question

我希望div通过媒体查询更改元素在[查看的文档顺序中]的位置.

<div>1</div>
<div>2</div>

当我改变我的视口然后我想div_1留在div_2.基本上div_1在顶部.但我希望通过媒体查询进行更改.可以吗??

Answer 1

使用flexbox及其order财产

我推荐一个.wrapper,虽然你也可以使用它,body并获得相同的结果

@media screen and (max-width: 800px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .wrapper div:first-child {
    order: 1;
  }
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>

如果flexbox不是一个选项,你可以使用display: table

@media screen and (max-width: 800px) {
  .wrapper {
    display: table; 
    width: 100%; 
  }
  .wrapper div:nth-child(1) {
    display: table-footer-group; 
  }
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>  
</div>