Question

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

＆＃13;

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

＆＃13;

当我更改我的视口时，我希望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>

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

1 个答案: