javascript - 使用媒体查询并在之前编写的另一个 div 下方显示一个 div

Question

你好，我想做的是我有一个 HTML 页面，其中有 2 个 div div1 和 div2 都向左浮动，显然 div1 在 div2 之前，但我想要的是在媒体查询的帮助下我想要一旦页面大小低于 400px，div1 将低于 div2

@media only screen and (max-width: 400px) {
  .div1,
  .div2 {
    width: 100%;
  }
}

<div style="float:left;width:50%;height:100%;" class='div1'>//1

</div>
<div style="float:left;width:50%;height:100%;" class='div2'>//2

</div>

代码是正确的，但是 div 在 div2 之前，我希望 div2 在 div1 之前。

谁能给我一些建议。这只是一个测试 html，我在页面中有更多的 div。

Answer 1

您可以使用 CSS3 flexbox 布局。

1. 在两个元素上包裹一个父容器。设置 flex 显示和方向为列(用于垂直放置)
2. 使用 order: 2
将您的第一个 div 重新排序为第二个元素

@media (max-width: 800px) { /* Change this to 400px, 800px for demo purpose */
  .wrapper {
    display: flex;
    flex-direction: column; /* For vertical placement of items */
  }
  .div1 {
    order: 2;
  }
}

<div class="wrapper">
  <div style="float:left;width:50%;height:100%;" class='div1'>
    1
  </div>
  <div style="float:left;width:50%;height:100%;" class='div2'>
    2
  </div>
</div>