html - 缩放时重新排列 div

Question

当我缩小窗口时是否可以“重新排列”我的 div block ？ 例如，当我缩小到 0-770px 宽度窗口时，红色 div 应该出现在蓝色 div 之前。但是当窗口最小时。 771px，蓝色div应该出现在红色div之前。

我不确定没有 Javascript 是否可行，但是没有 javascript 的解决方案肯定更可取。

谢谢!

@charset "utf-8";

/* CSS Document */

#wrapper {
  width: 1000px;
  height: auto;
  background-color: grey;
}

#boks-green {
  width: 50%;
  background-color: green;
  height: 400px;
  display: block;
  float: left;
}

#boks-blue {
  width: 50%;
  background-color: deepskyblue;
  height: 400px;
  display: block;
  position: relative;
  float: left;
}

#boks-red {
  width: 50%;
  background-color: red;
  height: 400px;
  display: block;
  position: relative;
  float: left;
}

#boks-purple {
  width: 50%;
  background-color: purple;
  height: 400px;
  display: block;
  position: relative;
  float: left;
}

@media only screen and (max-width: 770px) {
  #boks-green {
    width: 100%;
    background-color: green;
    height: 400px;
    display: block;
    float: left;
  }
  #boks-blue {
    width: 100%;
    background-color: deepskyblue;
    height: 400px;
    display: block;
    position: relative;
    float: left;
  }
  #boks-red {
    width: 100%;
    background-color: red;
    height: 400px;
    display: block;
    position: relative;
    float: left;
  }
  #boks-purple {
    width: 100%;
    background-color: purple;
    height: 400px;
    display: block;
    position: relative;
    float: left;
  }
}

<div id="wrapper">
  <div id="boks-green">
  </div>

  <div id="boks-blue">
  </div>

  <div id="boks-red">
  </div>

  <div id="boks-purple">
  </div>

</div>

Answer 1

如果您可能考虑使用 flexbox，现在是 quite well supported ，您可以轻松做到这一点。

首先你需要媒体查询，然后如果你的容器是 flex 容器，你可以使用子元素的 order 属性来选择元素应该显示的位置.

所以我会使用:

#boks-blue { 
 order: 1;
}

#wrapper { 
  display: flex;
  flex-direction: column;
}

在你的媒体查询中。

您可以了解有关 flexboxes 的更多信息 here或者您可以以非常互动的方式深入挖掘 here .