颠倒div的孩子的顺序

Question

如何用纯 CSS 反转 div 的子元素的顺序？

例如：

我想

<div id="parent">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>

显示为：

 D

C

B

A

我在 JSfiddle 上创建了一个演示：http: //jsfiddle.net/E7cVs/2/

原文由 Angelo A 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现代答案是

#parent {
  display: flex;
  flex-direction: column-reverse;
}

原文由 Pbrain19 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有点棘手，但可以工作；只是给你一个想法：

 div#top-to-bottom {
    position: absolute;
    width:50px;
    text-align: left;
    float: left;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
div#top-to-bottom > div {
    width: 50px;
    height: 50px;
    position: relative;
    float: right;
    display: block;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

在垂直轴上镜像容器和孩子。孩子们跟随容器的倒置 y 轴，但孩子们自己再次抬头。

演示

原文由 vals 发布，翻译遵循 CC BY-SA 4.0 许可协议