CSS Order Property

CSS order property is used to change the order of an element. Let’s see with an example:

HTML:

<div id="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
  <div class="item item-5">Item 5</div>
</div>

CSS:

#container{
  border: 2px black solid;
  display: flex;
  width: fit-content;
}
.item{
   width: 50px;
   height: 25px;
   padding: 1px;
}
.item-1{
   background-color: red;
}
.item-2{
   background-color: green;
}
.item-3{
   background-color: orange;
order: 1;
}
.item-4{
   background-color: darkviolet;
}
.item-5{
   background-color: yellow;
   order: 2;
}

Output:

Step to Learn Order property

1. 1. In our example, we have five items and you can see they are laid out item 1 through 5 which is the order in which they appear in the code.
   2. To mix up the order, we need to use the order property. If we set ‘order’ to ‘1’ in the “item-3” div class in CSS, see the below output the item-3 is pushed all the way to the end. That is because all items by default have an order of 0. So, order 1 is greater than the order of all other items and hence appears at the end.

      .item-3{
         background-color: orange;
         order: 1;
      }

      

   3. Now, If we change the order of item 5 to 2, see the output below ‘item-5’ is pushed to the end. So, order 0 items come first then order 1 and 2 to paused end.

      .item-5{
        background-color: yellow;
        order: 2;}

If we specify the same order number for more than one item, items are laid out in the order in which they appear in the source code.