CSS flexbox order

Read CSS Display
We have discussed CSS Flexbox layout and its related properties with examples in our previous post.
Right from the initial stages, ordering the elements has been quite tricky. CSS Flex box ordering emphasizes how useful is flexbox for responsive designing.When attempting to visually order the elements different to that of source code order flexbox order of the elements is very useful.

Order of the flex

Like direction and alignment CSS flex also provides techniques to define in which order flex elements should display.
Order property will work only on the direct flex elements.
By default,
Order value of all items is zero.
Order property can take values of negative, zero and positive.
Consider the below example

Changing the order of the flexboxes


.box-one{
order:4;
}
.box-two{
order:3;
}
.box-three{
order:1;
}
.box-four{
order:5;
}
.box-five{
order:6;
}


Changed order of the flexbox items