REORDER OBJECTS IN A FLEXIBLE BOX

You can change the display order of objects within a flexible box without changing the order of the objects in the HTML source code. This is done by setting the box-ordinal-group property to one or more box-children:

box-ordinal-group: number;
-moz-box-ordinal-group: number;
-webkit-box-ordinal-group: number;

A lower box-ordinal-group value means that the child should be displayed earlier in the box display order, and a higher value means later. If multiple children share the same value, as a group they appear in the value’s position, but their individual order is decided by their HTML ordering. All children have a default box-ordinal-group property value of 1, meaning that they are all members of the first ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.