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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.