Selected Reading
Q&A

CSS - Order

The CSS Order Property

The CSS order property is used to specify the order in which flex or grid items appear within a container. The order of the flex or grid items is determined by the values of their order property. The flex/grid items with the lower order value will be displayed first and the items with highest value will be displayed in the last.

Following are all possible values that can be used for property order:

integer: Represents the ordinal group to be used by the item.
inherit: Uses the same value of its parent.
initial: The element uses default value i.e 0.
unset: The element uses default value i.e 0.

Here are some additional things to keep in mind:

The order property is not inherited by child elements.
The order property only affects flex items.
Items in a container are sorted by ascending order value.
The default value of the order property is 0.

CSS Order - Demo

Try to select different values for CSS order property and see the result in right box.

CSS Order - Integer Value

The CSS order property can be set to an integer value which can be any positive or negative integer. A positive value means that the item with the highest positive order value will be displayed last and the item with maximum negative value will be displayed as the first item.

Example

Here is an example −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      background-color: #0ca14a;
      height: 90px;
   }
   .flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div style="order: 2">Item 1</div>
      <div style="order: 6">Item 2</div>
      <div style="order: 4">Item 3</div>
      <div style="order: -1">Item 4</div>
      <div style="order: 5">Item 6</div>
      <div style="order: -2">Item 7</div>
   </div>
</body>
</html>

CSS Order - Initial Value

The order: initial value simply sets the order property of the item back to its initial value, which is usually 0.

Example

Here is an example −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      background-color: #0ca14a;
      height: 90px;
   }
   .flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div style="order: 5">Item 1</div>
      <div style="order: 3">Item 2</div>
      <div style="order: 1">Item 3</div>
      <div style="order: 6">Item 4</div>
      <div style="order: initial">Item 5</div>
      <div style="order: 4">Item 6</div>
   </div>
</body>
</html>

CSS Order - Unset Value

If you set the order property to unset, the flex item will be displayed in it's default order based on the HTML markup.

Example

Here is an example where order property is set to unset to the flex item 1st and 3rd. Then order of these flex items will be displayed in the default order −

<html>
<head>
<style>
   .flex_container {
      display: flex;
      background-color: #0ca14a;
      height: 90px;
   }

   .flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div style="order: unset">Item 1</div>
      <div style="order: 4">Item 2</div>
      <div style="order: unset">Item 3</div>
      <div style="order: 1">Item 4</div>
      <div style="order: 3">Item 5</div>
      <div style="order: 5">Item 6</div>
   </div>
</body>
</html>

CSS Order - Revert Value

When we set the order property to the revert value, the flex item will be displayed in the order it appears like as if the webpage had not included any CSS.

Example

Here is an example where Order property is set to revert for the first and fifth flex-items. Now they will appear in the same order as they have been formatted with HTML code.

<!DOCTYPE html>
<html>
<head>
<style>
   .flex_container {
      display: flex;
      background-color: #0ca14a;
      height: 90px;
   }
   .flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
<div class="flex_container">
   <div style="order: revert">Item 2</div>
   <div style="order: 3">Item 1</div>
   <div style="order: 1">Item 3</div>
   <div style="order: 6">Item 4</div>
   <div style="order: revert">Item 5</div>
   <div style="order: 4">Item 6</div>
</div>
</body>
</html>