CSS order Property

The order CSS property specifies the order in which a flex items are displayed and laid out within a flex container. Elements are laid out by ascending order of the order value. Elements with the same order value are laid out in the order they appear in the source code.

This property is used to specify the order of each flexible item in relation to other items inside the flexible container. It only gives the position to the items present in the container and categorized into a different order as desired by the user. If the element is not the flexible item then this property does not exist anymore.

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

CSS Syntax

order: number|initial|inherit;

Supported Browsers: The browser supported by property are listed below:

Chrome
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
IE Phone
Opera
Opera Mobile
Safari (WebKit)
Safari Mobile

Example -

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 400px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}

/* Safari 6.1+ */
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;}
</style>
</head>
<body>

<h1>The order Property</h1>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the order property.</p>

<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-order property.</p>

</body>
</html>