Reordering Individual Flex Items Using CSS3

To reorder the individual Flex Items using CSS3, use the order property. Remember, this works only in case of flex items. Let's say you want to set the 1st flex item as the last, then achieve this using the CSS order property.

Set the parent container

Set a div container with child divs −

<div class="container">
   <div class="first">First Div</div>
   <div class="second">Second Div</div>
   <div class="third">Third Div</div>
</div>

The flex container

Set the above container as a flex using the display property with the value flex −

.container {
   height: 150px;
   display: flex;
   width: 100%;
   border: 2px solid red;
}

Reorder the 1st flex item as 2nd

The order property is used to reorder the first flex item as second −

.first {
   background-color: rgb(55, 0, 255);
   order:2;
}

Reorder the 2nd flex item as 3rd

The order property is used to reorder the second flex item as third −

.second {
   background-color: red;
   order:3;
}

Reorder the 3rd flex item as 1st

The order property is used to reorder the third flex item as first −

.third {
   background-color: rgb(140, 0, 255);
   order:1;
}

Example

The following is the code for reordering flex items −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .container {
         height: 150px;
         display: flex;
         width: 100%;
         border: 2px solid red;
      }
      div {
         width: 200px;
         height: 150px;
         color: white;
         text-align: center;
         font-size: 30px;
      }
      .first {
         background-color: rgb(55, 0, 255);
         order:2;
      }
      .second {
         background-color: red;
         order:3;
      }
      .third {
         background-color: rgb(140, 0, 255);
         order:1;
      }
   </style>
</head>
<body>
   <h1>Reordering individual items example</h1>
   <div class="container">
      <div class="first">First Div</div>
      <div class="second">Second Div</div>
      <div class="third">Third Div</div>
   </div>
</body>
</html>
Updated on: 2023-12-26T15:35:30+05:30

238 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements