Reverse Box Order on Mobile

It’s a pretty common trend for many presentation websites to have a 3-column “feature box” where products or features are showcased. Since on mobile they would be squeezed too much, it’s a best practice to make these boxes 100% wide and place them one under each other, following the same order, from left to right but in a top-down direction. Now, although changing the box order on mobile devices is rarely requested, what if we were asked to do this? How can we solve this? With Flexbox!

The Flexible Box Module (Flexbox) is a CSS3 module (a set of properties) that provides a new and more powerful way to arrange, distribute and fit elements into a container. Although this is one of the most interesting features in CSS3, its adoption rate has been pretty low in the past because of many reasons. It’s not supported by IE9 and, when Microsoft dropped support for IE8, leaving IE9 behind as well was often considered not acceptable: with Flexbox being a layout module, you can not easily provide efficient fallbacks. The second reason is about the syntax: it has changed many times, leaving developers in chaos and confusion. Even today, if you need to have extensive support, the syntax is so complicated that is best to rely on SASS/LESS mixins that can take care of the different vendor prefixes. Last but not least… Flexbox can be really hard to understand, and some odd behaviors often show up unexpectedly unless you have studied it in detail.

But all these struggles aren’t in vain since Flexbox is a set of powerful and useful properties that will change the way to build layouts, and they will also rapidly solve some troubles that would be hard (or impossible) to solve without them.

This property is widely supported: very well on the mobile side, back to very old iOS and Android versions (3.2 and 2.1 respectively), and nicely on desktop as well, with only IE9 cut off, but one point to consider is that, as mentioned before, the syntax varies and can be categorized into: old, hybrid, modern and new.