Wie kann man die Reihenfolge von a umkehren? divKinder mit reinem CSS?

Zum Beispiel:

Ich will

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

angezeigt werden als:

D
C
B
A

Ich habe eine Demo auf JSfiddle erstellt:
http://jsfiddle.net/E7cVs/2/

Die moderne Antwort lautet

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

Etwas knifflig, kann aber funktionieren; Nur um Ihnen die Idee zu geben:

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);
}

Spiegeln Sie in der vertikalen Achse sowohl den Behälter als auch die Kinder. Die Kinder folgen der umgekehrten Y-Achse des Containers, aber die Kinder selbst sind wieder mit dem Kopf nach oben gerichtet.

Demo

Bei mir funktioniert folgender Code:

<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>

<style>
#parent{
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
}
</style>

Nur CSS-Lösung: (Ich habe alle Selektoren auf Klassenselektoren umgestellt, um möglicherweise auftretende Spezifitätsprobleme zu vermeiden. Nur eine Gewohnheit von mir und anderen. Ich habe auch Stile entfernt, die für das Beispiel nicht relevant sind.)

.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;
}

Demo: http://jsfiddle.net/zA4Ee/3/

Javascript-Lösung:

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

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

Demo: http://jsfiddle.net/t6q44/5/

Sie können dies mit reinem CSS tun, es gibt jedoch große Einschränkungen. Versuchen Sie es mit einer der folgenden Methoden, aber beide haben ihre Nachteile:

1. Schweben Sie Ihre Divs richtig. Dies funktioniert nur, wenn Ihre Elemente horizontal angezeigt werden. Außerdem werden Ihre Elemente nach rechts verschoben. Sobald Sie sie löschen oder in den normalen Dokumentenfluss zurückführen, wird die Bestellung wiederhergestellt.
2. Durch die Verwendung absoluter Positionierung. Dies ist schwierig für Elemente, die keine definierte Höhe haben.

Wenn Sie nach rechts schweben, wird die Reihenfolge umgekehrt, in der sie horizontal angezeigt werden. Hier ist eine jsFiddle-Demo.

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

#parent div {
    float: right;
}

Durch die absolute Position werden die Elemente aus dem normalen Dokumentenfluss herausgebrochen und Sie können sie dann genau nach Ihren Wünschen positionieren. Hier ist eine Fiddle-Demo.

Hier ist eine einfachere, portablere Version der @vals-Antwort mit vollständigem Präfix. Beachten Sie, dass CSS3 2D-Transformationen haben im Februar 2017 nur 94 % Unterstützung.

.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>