html - 反转 float 元素的堆叠顺序

Question

Jsfiddle:https://jsfiddle.net/pqbu2d70/

要求:

• 在响应式模式下，bottom box必须在底部，middle在中间，top在顶部
• 在桌面模式下，底部框必须在左侧
• 没有javascript
• parent 的高度必须是最大的 child 的高度(所以没有绝对定位)

您可以看到，当 fiddle 现在站立时，随着您减小窗口的宽度，底部停留在顶部。如何仅使用 HTML/CSS 实现上述目标？

.parent {
  border: 1px solid blue;
  overflow: hidden;
}
.random-height {
  height: 200px !important;
}
.child {
  height: 100px;
  width: 30%;
  border: 1px solid red;
  float: left;
}
@media (max-width: 500px) {
  .child {
    width: 100%;
  }
}
}

<div class="parent">
  <div class="child random-height">bottom</div>
  <div class="child">middle</div>
  <div class="child">top</div>
</div>

Answer 1

我能够通过将以下内容应用于 parent 和 child 来实现这一目标，但似乎......错？ https://jsfiddle.net/pqbu2d70/1/

    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);