order

With the order property, you can change the display order of flex items inside a flex container.

In this example, the element with the class .item will be last, even if it is first in the markup.

        
          
          .container {  display: flex;}.item {  order: 3;}
          .container {
  display: flex;
}

.item {
  order: 3;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

By default, elements are displayed in the order they appear in the markup, and the value of the order property is 0. But this property allows rearranging them.

The value is set as a whole negative or positive number. Elements will appear in ascending order.

💡 The property only changes the visual order. It's important to remember this. Screen readers will still read elements in the order they appear in the markup.