reverse the order of div's children

How can you reverse the order of a div's children with pure CSS?

For example:

I want

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

to be displayed as:

D

C

B

A

I've created a demo on JSfiddle: http://jsfiddle.net/E7cVs/2/

The modern answer is

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

A little bit tricky, but can work; just to give you the idea:

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

mirror in the vertical axis both the container and the childs. The childs follow the inverted y axis of the container, but the children themselves are again head up.

demo

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

100% work this 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>

CSS only solution: ( I switched all selectors to class selectors as to not deal with specificity issues that could occur. Just an habit of mine and others. I've also removed styles not relevant to the example. )

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

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/

You can do this with pure CSS, but there are major caveats. Try using one of the following methods, but both have draw their backs:

1. Floating your divs right. This will only work if your elements appear horizontally. It will also shift your elements to the right. As soon as you clear them or return them to the normal document flow, the order will revert.
2. By using absolute positioning. This is tricky for elements that do not have a defined height.

Floating right will reverse the order in which they're displayed horizontally. Here's a jsFiddle demo.

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

#parent div {
    float: right;
}

Absolute position will break out the elements from the normal document flow and allow you to position then precisely as you choose. Here's a fiddle demo.

Here's a simpler, more portable, fully prefixed take on @vals answer. Note that CSS3 2D Transforms only have 94% support as of February 2017.

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

To build on flex answers presented elsewhere here, here is a complete cross-browser solution as per 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;
} 

This is another easy modern way. Enjoy!

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

You can use flex-direction to reverse elements.

The flex-direction property accepts four possible values:

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.

display: table-header-group; display: table-footer-group;

for children

display: table;

for parent

Use abosolute positioning and top left