- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Reordering Individual Flex Items using CSS3
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>
Output
The above code will produce the following output −
- Related Articles
- Enable Wrapping of Flex Items using CSS3
- Align Flex Items along Cross Axis using CSS3
- Understanding the Flex Layout Model in CSS3
- Wrap flex items in Bootstrap
- Wrap the flex items with CSS
- Avoid wrapping flex items with CSS
- Avoid wrapping flex-items in Bootstrap
- Show flex items horizontally in Bootstrap
- Set the flex items vertically with CSS
- Set the flex items horizontally with CSS
- Align flex items from everywhere in Bootstrap
- Display flex items vertically in Bootstrap 4
- Wrap flex items in reversed order in Bootstrap
- Controlling the Dimensions of Flex Items in CSS
- Wrap the flex items in reverse order with CSS

Advertisements