Reverse Box Order on Mobile

Alessandro Lo VerdePosted on
responsive designflexboxcss

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!


Meet a slightly grumpy friend: 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.

A pretty common scenario …

After this long, but unavoidable introduction, let’s get back to our task of having to arrange the boxes inside our “feature box” in a specific order on mobile devices only. Don’t even start thinking about some overly complicated relative/absolute positioning tricks; the order property from the Flexible Box Module will easily solve the issue. We can simply assign a position index to each box using the order property:

Copy
.box:first-child { order: 3 }
.box { order: 2 )
.box:last-child { order: 1 }

This causes the last box to become the first. Please note that elements without this property will simply stay on top of the order ladder. 

One last note about support

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. 

Copy
#featureBox {
  display: -webkit-box;	           ⇒ iOS up to 6.1 and Android up to 4.3, Safari 6    
  display: -ms-flexbox;	           ⇒ IE10    
  display: -webkit-flex;           ⇒ Safari up to 8 and iOS up to 8.4
  display: flex;                   ⇒ Current implementation
}
.box {
   -webkit-box-ordinal-group: 1;   ⇒ iOS up to 6.1 and Android up to 4.3, Safari 6
   -ms-flex-order: 1;     	   ⇒ IE10
   -webkit-order: 1; 	           ⇒ Safari up to 8 and iOS up to 8.4
   order: 1;	                   ⇒ Current implementation
}


Flexbox probably isn’t the most straightforward and easy to learn CSS3 property, but it’s surely the most powerful, since it’s not a single property but an entire set we can use to shape our layout in ways we could only dream of before. Just keep an extra eye on the nasty syntax.

More great blog posts from Alessandro Lo Verde