The CSS3 flexbox module enables you to reposition your content with the position property
. This means that you can reorder the visual position of a child item of flexbox without the need to change you source's HTML code. Besides the position
property, the flex-direction
property can also be set to column-reverse
or row-reverse
to reverse the position of all child items.
In this recipe, you will learn how to do this repositioning by leveraging the flexbox grid library.
You can download the Less code to build the flexbox grid library from https://github.com/bassjobsen/flexboxgrid. In this recipe, you will reuse the Less and HTML code from the Integrating a navigation menu in the layout recipe of this chapter. The result can be easily seen in your browser, so use the client-side less.js
compiler to compile the Less code.