CSS order Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The order CSS property is used in conjunction with Flexbox or Grid layout systems to determine the order in which elements should appear within their parent container. It allows developers to rearrange the visual order of elements without changing their position in the HTML source code. By assigning different order values to elements, you can control the sequence in which they are displayed on the web page, making it easier to create responsive and flexible layouts that adapt to different screen sizes and orientations. Elements with lower order values appear earlier in the visual order, while those with higher values appear later. This property provides a powerful tool for improving the accessibility and user experience of web content.

Initial value: 0
Applies to: Flex items and absolutely-positioned flex container children
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.order

Interactive Demo

order: 0;

order: 3;

order: -1;

order: 2;

Box 1

Box 2

Box 3

Box 4

Box 5

Syntax

order: <integer>

Values

<integer>The value is any integer, including negative numbers and zero.

Example

HTML

<h3>order: -1;</h3> 

<div class="container"> 

   <div> A </div> 

   <div> B </div> 

   <div> C </div> 

   <div> D </div> 

   <div> E </div> 

</div> 

<h3>order: 1; </h3> 

<div class="container2"> 

   <div> A </div> 

   <div> B </div> 

   <div> C </div> 

   <div> D </div> 

   <div> E </div> 

</div> 

<h3>order: 2;</h3> 

<div class="container3"> 

   <div> A </div> 

   <div> B </div> 

   <div> C </div> 

   <div> D </div> 

   <div> E </div> 

</div>

CSS

.container, .container2, .container3 { 
   display: -webkit-flex;
   display: flex;  
} 
div>div { 
   width: 50px; 
   height: 50px;
   border: 1px solid orange; 
} 
.container div:nth-of-type(4) {
   order: -1; 
   background: Tan;
}
.container2 div:nth-of-type(4) { 
   order: 1;
   background: Tan;
} 
.container3 div:nth-of-type(4) { 
   order: 2;
   background: Tan;
}

Result

Editor