Angelo A Angelo A - 1 year ago 76
CSS Question

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

to be displayed as:





I've created a demo on JSfiddle:

Answer Source

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

div#top-to-bottom {
    position: absolute;
    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.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download