Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

reverse the order of div's children

Tags:

html

css

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/

like image 749
Angelo A Avatar asked Jun 04 '13 13:06

Angelo A


People also ask

What is CSS order?

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.


2 Answers

The modern answer is

#parent {   display: flex;   flex-direction: column-reverse; } 
like image 63
Pbrain19 Avatar answered Sep 21 '22 17:09

Pbrain19


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

like image 30
vals Avatar answered Sep 20 '22 17:09

vals