order

Avatar of
on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

The order property is a sub-property of the Flexible Box Layout module.Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering.

.elememt {
  order: 3;
}

Syntax

order: <number>

Demo

The following demo shows how the default order (1, 2, 3, 4, 5) has been altered by setting the order property to each item.

Other Resources

Browser support

IEEdgeFirefoxChromeSafariOpera
10 1
11
12+20+21-28 2
29+
7-8 2
9+
12.1+
iOS
Safari
Chrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
7-8.4 2
9+
92+90+92+12.1+
Source: caniuse
  • 1 Supported with prefix -ms-
  • 1 Supported with prefix -webkit-

For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” and this article from DevOpera.