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

Question

你好，我想做的是我有一个 HTML 页面，其中有 2 divs div1 和 div2 都是浮动的左边，显然 div1 出现在 div2 之前，但我想要的是在媒体查询的帮助下，我希望 div1 尽快低于 div2 页尺寸低于 400 像素

@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 模型来做到这一点。试试下面的代码：- 将以下样式应用于父元素

parent-element {
  display: flex; /* or inline-flex */
}

在媒体查询中，目标是您要移动的子元素，在您的情况下是：-

@media (max-width:400px) {
    div2 {
       order: 1;
    }
    div1 {
       order:2;
    }
}

此代码可以正常工作。

Answer 2

用 jquery 试试这个：

if ($(window).width() < 400) {
   $('.div2').insertBefore('.div1');
}

Answer 3

您可以使用 CSS3 flexbox 布局。

在两个元素上包裹一个父容器。将 flex 显示和方向设置为列（垂直放置）
使用 order: 2

@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>

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

Using media query and show a div below another div which is written before

html

javascript

css

media-queries