CSS order Property


Set the order of the flexible items:

/* Code for Safari 6.1 and newer */
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 properties. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.order="2" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

order 29.0
21.0 -webkit-
11.0 28.0
18.0 -moz-
6.1 -webkit- 12.10

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

Related Pages

CSS Reference: flex property

CSS Reference: flex-basis property

CSS Reference: flex-direction property

CSS Reference: flex-flow property

CSS Reference: flex-grow property

CSS Reference: flex-shrink property

CSS Reference: flex-wrap property

CSS Reference: align-content property

CSS Reference: align-items property

CSS Reference: align-self property

HTML DOM reference: order property