Question

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

，div1就会低于div2

＆＃13;

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

＆＃13;

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

＆＃13;

代码是正确的但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

您可以使用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>

Answer 3

尝试使用jquery：

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

使用媒体查询并在

3 个答案: