CSS order

It is used for ordering the flex items. if the element is not flexible, then this property will not work. This property modifies the visual order of the flex items.

Values:

integer : The order of the flexible item(default value is 0).
initial : Property value to its default value.
inherit : Computed value of its parent element.

Example:

<!DOCTYPE html>
<html>
 <head>
  <style>
   body{
   text-align: center;
   }
    .container {
     display: flex;
     background-color: #ff99cc;
     height: 150px;
     width: auto;
     flex-wrap: wrap;
     }
     div {
       background-color: #ff3399;
       line-height: 40px;
                    color: white;
                    padding: 10px;
                    text-align: center;
       font-size: 35px;
       width: 100px;
       margin: 20px;
      }
   </style>
 </head>
 <body>
 <h1> CSS order Property </h1>
   <div class = "container">
    <div style = "order: 3"> 8 </div>
    <div style = "order: 0"> 7 </div>
    <div style = "order: 0"> 6 </div>
    <div style = "order: 1"> 5 </div>
    <div style = "order: -1"> 4 </div>
    <div style = "order: 2"> 3 </div>
    <div style = "order: 1"> 2 </div>
   </div>
 </body>
</html>

OUTPUT: