css - 如何在移动设备上更改两个 div 的顺序？

Question

我试图在容器中的两个 div 达到移动尺寸时更改它们的顺序。

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

是否可以将其更改为

<div class="container">
    <div class="div2"></div>
    <div class="div1"></div>
</div>

Answer 1

取决于which browsers你需要支持，你可以使用flexbox来切换div的顺序。

.container {
  display: flex;
}
.div1 {
  order: 0;
}
@media screen and (min-width: 780px)  {
  .div1 {
    order: 1;
  }
}

JS Fiddle