Reordering Individual Flex Items using CSS3

CSS Web Development Front End Technology

To reorder individual Flex Items using CSS3, use the order property. Following is the code for reordering flex items −

Example

<!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>