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!
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.
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:
.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.
#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

Suppose that you want to buy a grill to have a small party with a couple of friends, and then you realize that you’ve placed the wrong order since a monster sized grill arrives at your door. You probably want to send it back, trying to explain that the size was missing from the item’s description...

There are good CMS's out there, and many are fine tools to make blogs, websites for small business and even for a medium-sized one; but can they handle a large website, with a lot of data interaction that comes from external sources? What comes up if you need to build an intranet as well?...

Viewport Units are a fine addition to the new CSS3 properties and allow us to calculate dimensions according to the actual size of the viewport, instead of the parent element (as it’s always been so far). There is a new precious tool for better and easier responsiveness that leads the way to a...

Most of today's websites use a wrapping container element on their pages – for good reason: it’s handy to have an element that surrounds the content, allowing it to shrink and expand to given breakpoints. But our beloved container can sometimes be a prison (and not even a golden one) when we want...

Powerful and widely supported, this handy CSS3 property helps save us from headaches when dealing with layout and box model.
Back in the day, everything on the web was coded in pixels, but as the desire for flexible design arose, font sizes were frequently defined in ems and more recently in...

Typography is often a mixed blessing for the web: Developers tend to overlook it since it does not play an important part in their interests, and designers sometimes are disappointed about the limits of the web, compared to print design.
And yet typography is what truly makes the difference...