Jobs Hub

CSS order

The CSS order property is used when we need to customize the order of flex items, in flex container. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown;}
      .container > div{padding: 12px; border: 1px solid coral; color: wheat;}
      #one{order: 3;}
      #two{order: 1;}
      #three{order: 4;}
      #four{order: 2;}
   </style>
</head>
<body>

   <div class="container">
      <div id="one">A</div>
      <div id="two">B</div>
      <div id="three">C</div>
      <div id="four">D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D

CSS order Syntax

The syntax of order property in CSS, is:

order: x;

The value of x should be any of the following:

CSS Online Test

« Previous Tutorial Next Tutorial »