css - 响应式网页设计场景

Question

我正在设计如下所示的 3 列网页布局。

为了使其具有响应性，我指定了以 % 为单位的宽度、以像素为单位的最小宽度和 float:left。现在，如果我调整页面大小，所有 3 个 DIV(1、2 和 3)首先调整大小，然后第 3 个 DIV 移动到第 1 个 DIV 下方。如果我调整更多，则第二个 DIV 移动到第一个下方，第三个移动到第二个下方。

这是因为 float 属性。但是我想以这样的方式修改它，即应该首先移动第 3 个 DIV(因为它已经存在)然后应该移动第 1 个 DIV 而不是第 2 个 DIV。第二个 DIV 必须在顶部。

我该怎么做？

Answer 1

可以使用 Flexbox 进行重新排序。但是，您需要 1 个媒体查询。

http://codepen.io/cimmanon/pen/fwqed

body {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

div {
  -webkit-flex: 1 1 20em;
  -ms-flex: 1 1 20em;
  flex: 1 1 20em;
}

@media (max-width: 40em) {
  .a, .c {
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}
.a {
  background: orange;
}

.b {
  background: yellow;
}

.c {
  background: grey;
}

重新排序也可以通过相对定位来完成(参见:https://stackoverflow.com/questions/16307621/reordering-elements-at-specific-browser-widths)。