CSS order Property

Set the order of the flexible items:

/* Code for Safari 6.1 to 8.0 */
div#myRedDIV {-webkit-order: 2;}
div#myBlueDIV {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}

Try it Yourself »

Definition and Usage

The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

Note: If the element is not a flexible item, the order property has no effect.

Default value: 0
Inherited: no
Animatable: yes, see individual propertiesRead about animatable – Try it
Version: CSS3
JavaScript syntax: object.style.order=”2″Try it

CSS Syntax

order: number|initial|inherit;

Property Values

Value Description
number Default value 0. Specifies the order for the flexible item
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit