javascript - 响应式设计，乱序堆叠div

Question

我想知道是否有一种纯 CSS 方法可以在 3 个(或更多)div 小到足以将一个堆叠在另一个之上时乱序堆叠它们。

我的意思是，我按这个顺序有 3 个 div

|             |
|[1]  [2]  [3]|
|             |

我想把它们堆叠起来:

|   |
|[3]|
|[1]|
|[2]|
|   |

在 CSS 中有什么方法可以进行这种类型的堆叠吗？还是我必须为此使用 javascript？

Answer 1

我喜欢使用表组来帮助我处理不利于文档流程的困难排序。

Fiddle

示例

<ul>
    <li class="one">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>
</ul>

CSS

ul {
  display: table;
  width: 100%;
}
ul li {
  width: 33%;
  text-align: center;
  box-sizing:border-box;
}
.two {
   display: table-footer-group;
   /* Will be displayed at the bottom */
   background-color: green;
}
.one {
  display: table-row-group;
  /* Will be displayed in the middle */
  background-color: yellow;
}
.three {
  display: table-header-group;
  /* Will be displayed at the top */
  background-color: lightblue;
}
@media (min-width: 600px) {
  ul li {
    float: left;
  }    
}