Flex is a layout system that arranges items in rows and columns.
The position of each item can be specified with the order property.
It sets the item order relative to the other items inside the container.
Each flex item inside the container sets their own order.
<style>
.flex-order {
background-color: #776fac;
padding: 5px;
display: flex;
}
.flex-order > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-order">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
order: number | initial | inherit;
| Value | Description |
|---|---|
number |
Default is 0, sets flexible items order |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when order support started for each browser.
 Chrome
|
29.0 | Aug 2013 |
 Firefox
|
28.0 | Mar 2014 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
17.0 | Aug 2013 |
 Safari
|
9.0 | Sep 2015 |
