html - CSS3的自适应设计

我曾经使用过响应设计。现在，我有一种感觉，但不确定，是否可以通过其ID或类来管理每个div的位置。例如：

<div id='first'></div>
<div id='second'></div>
<div id='third'></div>

在CSS中，您也许可以说：

@media (max-width: 600px) {
     // pseudo code
     #second: after #third
}

@media (max-width: 300px) {
     // pseudo code
     #first: after #third
}

是否可以通过这种方式管理元素而无需为位置赋予一个值（左或右为一个值）？

最佳答案

您可以使用order属性通过flexbox进行此操作。

FIDDLE（调整浏览器窗口大小）

.container {
  display: flex;
}
.container div {
  display: inline-block;
  margin: 40px;
  width: 100px;
  height: 100px;
}
.first {
  background: gold;
}
.second {
  background: tomato;
}
.third {
  background: aqua;
}
@media (max-width: 900px) {
  .second {
    order: 3;
  }
}
@media (max-width: 600px) {
  .second {
    order: 1;
  }
}
.first {
  order: 3;
}
}

<div class="container">
  <div class="first">first</div>
  <div class="second">second</div>
  <div class="third">third</div>
</div>

查看this css-tricks articl e以获得flexbox的概述。

关于html - CSS3的自适应设计，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26907896/