如何在媒体查询中设置页脚下的标题

Question

我有标题，部分内容和页脚。当我在电话媒体查询（0到480px）时，我想更改标题的位置在我的页脚下。可能吗？

Answer 1

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;