html - 如何在媒体查询中的页脚下设置页眉

Question

我有页眉、一些部分和一个页脚。当我在电话媒体查询中(0 到 480 像素)时，我想将页眉的位置更改为在页脚下方。是否可以？

Answer 1

你可以使用display: flex; flex-direction: column; 在父级上，然后使用 order 属性在媒体查询中重新组织。

body {
  display: flex;
  flex-direction: column;
}

@media (max-width: 480px) {
  header {
    order: 1;
  }
}

<header>header</header>
<section>section</section>
<section>section</section>
<section>section</section>
<footer>footer</footer>