如何用純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/

# # #現代答案是

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

# # #有點棘手，但可以工作；給你一個想法:

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軸，但是孩子自己再次抬頭。

演示 # # #以下代碼對我有用:

<style type="text/css">
    .wrapper {
       display: flex;
       flex-direction: column-reverse;
    }
</style>
    
    <div class="wrapper">
       <div class="main">top</div>
       <div class="footer">bottom</div>
    </div>

###僅CSS解決方案: (我將所有選擇器切換為類選擇器，以避免處理可能出現的特殊性問題。只是我和其他人的一個習慣。我還刪除了與示例無關的樣式。)

.top-to-bottom {
    position: absolute;
}

.child {
    width: 50px;
    height: 50px;
    margin-top: -100px; /* height * 2 */
}

.child:nth-child(1) {
    margin-top: 150px; /* height * ( num of childs -1 )  */
}

.a {
    background:blue;

}
.b {
    background:red;
}

.c {
    background:purple;
}

.d {
    background:green;
}

演示:http://jsfiddle.net/zA4Ee/3/

Javascript解決方案:

var parent = document.getElementsByClassName('top-to-bottom')[0],
    divs = parent.children,
    i = divs.length - 1;

for (; i--;) {
    parent.appendChild(divs[i])
}

演示:http://jsfiddle.net/t6q44/5/

# # #你可以用純CSS做到這一點，但是有一些重要的注意事項。嘗試使用以下方法之一，但兩種方法都無法奏效:

向右移動你的手指。只有當你的元素水平出現時，這才會起作用。它還會將你的元素向右移動。一旦您清除它們或將它們返回到正常的文檔流，順序就會恢復。 通過使用絕對定位。這對于沒有定義高度的元素來說很棘手。 向右浮動將顛倒它們水平顯示的順序。這里有一個jsFiddle演示。

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

#parent div {
    float: right;
}

絕對位置將從正常的文檔流中分離出元素，并允許您根據自己的選擇精確定位。這里有一個小提琴演示。

# # #下面是一個更簡單、更便攜、全前綴的take on @vals答案。請注意，截至2017年2月，CSS3 2D變換僅獲得94%的支持。

.reverse, .reverse>* {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

<div class="reverse">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
</div>

# # #這是另一種簡單的現代方式。盡情享受吧！

#parent{
     /* Just set display flex to parent div */
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
      
     /* Use this part if you need also a column direction */
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
}

/* This way you can decide the order of the internal divs */
#parent div:nth-child(1){
    -webkit-order: 4;
    -ms-order: 4;
    order: 4;
}
#parent div:nth-child(2){
    -webkit-order: 3;
    -ms-order: 3;
    order: 3;
}
#parent div:nth-child(3){
    -webkit-order: 2;
    -ms-order: 2;
    order: 2;
}
#parent div:nth-child(4){
    -webkit-order: 1;
    -ms-order: 1;
    order: 1;
}

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

# # #為了在此處提供的flex答案的基礎上進行構建，Autoprefixer提供了一個完整的跨瀏覽器解決方案:

#parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

# # #您可以使用flex-direction反轉元素。

flex-direction屬性接受四個可能的值:

row : same as text direction (default)
row-reverse : opposite to text direction.
column : same as row but top to bottom.
column-reverse : same as row-reverse top to bottom.

# # #顯示:表頭組； 顯示:表格-頁腳-分組；

給孩子的

顯示:表格；

對于父母

# # #使用絕對定位和左上角