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/