CSS Flexible box layout module - part 5 - Changing order of elements

On interactive pages it is common that DOM elements move, disappear or appear as a result of user's behavior. CSS3 provides very useful property order, to ordering elements inside flex container. By default all flex items belong to one ordinal group – 0. If we want to change place of specific flex item, easiest way is to change its ordinal group number. Value of this property is an integer and represents the ordinal group the flex item has been assigned. Items are ordered by ascending ordinal group number.

So if we have 6 flex items inside flex container and define order: 1; for the first one, than it will be displayed in the end of flex container. Elements that belong to the same ordinal group are displaying in the order from HTML.