CSS order Property

Description

The order property defines the order in which flexes are displayed inside the flex container. Elements are arranged according to the order property from smaller to larger. With equal order values, the elements are displayed in the order in which they appear in the source code.

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

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