CSS3 से व्यक्तिगत फ्लेक्स आइटम्स को रीऑर्डर करना

CSS3 से व्यक्तिगत फ्लेक्स आइटम्स को रीऑर्डर करने के लिए, order प्रॉपर्टी का उपयोग करें। फ्लेक्स आइटम्स को रीऑर्डर करने का कोड निम्न है -

उदाहरण

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

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -