Many blog posts like A Complete Guide to Flexbox or Using Flexbox state that CSS flexbox can be used as a solution for common responsive design problems. One of these common problems is how to deal with content choreography. Or in other words, how to re-order elements for different view ports.

Flexbox offers a cross mobile browser solution to handle the re-ordering of elements for specific viewports. With flexbox you can define the order of elements in a specific flexbox container like this:

.flex-container {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

Once the flexbox container is set up, you can specify the order of elements within the flexbox container like so:

.content {

-webkit-box-ordinal-group: 2;

-moz-box-ordinal-group: 2;

-ms-flex-order: 2;

-webkit-order: 2;

order: 2;

} .nav {

-webkit-box-ordinal-group: 1;

-moz-box-ordinal-group: 1;

-ms-flex-order: 1;

-webkit-order: 1;

order: 1;

} .sidebar {

-webkit-box-ordinal-group: 3;

-moz-box-ordinal-group: 3;

-ms-flex-order: 3;

-webkit-order: 3;

order: 3;

}

Due to the fact that flexbox works on any major mobile browser it seems to be ready for use for the mobile version of your website.

However, when we tried to use flexbox @AutoScout24 for horizontally re-ordering our elements for the mobile version of our list page, we noticed that it does not work in the Android 4.0 and mobile safari 6 browser. Both of which are heavily used by our site visitors using a mobile phone (~30% of our users have the Android 4.0 browser installed).

The actual problem is the flexbox “flex-direction” or “flex-wrap” property. The default flex-direction is “row”, which is not useful for mobile viewports, since we don’t want the elements to be shown in vertical, but in horizontal order on a mobile device:

http://codepen.io/meckert/pen/JodPpz?editors=110#html-box

In the example above, you can experience the flexbox magic when resizing your browser. Notice the elements being stacked and sidebar being shown in the middle instead of being the last element in a viewport below 600px. If you open this example in the Android 4.0 browser, it won’t work as expected since the flex-direction can’t be changed to column!

As “flex-direction” is not supported by Android 4.0 and mobile safari 6, flexbox is not yet a solution for you if you have to support the Android 4.0 browser and below.

UPDATE (27–11–2014):

According to the comment by “B” (cheers!), it turns out that changing the flex-direction is supported by old mobile browsers (Android 2.1+, Safari 5.1+) when using the 2009 flexbox syntax. Adding:

.flex-container {

...

box-orient: vertical;

-webkit-box-orient: vertical;

}

to the flexbox container solves the problem. I tried it in an Adnorid 4.0 stock browser and it works like a charme.

I also updated the example code:

http://codepen.io/meckert/pen/JodPpz?editors=110#html-box

Alternative solution:

If you don’t have more than three elements to re-order, you can use the display: table solution.