For the past few weeks, I've been building a marketing page for an event which features a small pricing breakdown. This breakdown is in three boxes, side-by-side with flexbox, highlighting each different pricing tier: group, individual, and vip.

I received an email from one the designers after reviewing the layout:

...in mobile view, can you put the [individual price] first followed by group, then vip?

— Designer

Of course! Since I used flexbox, the task was quite trivial. Using flexbox's order attribute, I'm able to control the way flexbox displays the items easily. In this case, I flagged the individual price with an extra attribute when the proper media query breakpoint was hit. order: -1.

What's awesome about this, is that I don't need to also apply order to any other item in the list. Flexbox will list any items without an order attribute first in dom order, indexing them as 1 to X. Then any items with a specific order attribute are then placed in order after the unspecified items. The exception to that rule is when an item has a negative order integer, which will then place it first in the list before the unspecified items. Items that have the same order value, will be then sorted by dom order.

From CSS Tricks' flexbox guide:

Here's a codepen showing an example of how this functions. I write a small piece of javascript to switch classes instead of a media query.

Without flexbox, I'd most likely have to use a few complicated floats and auto-margins to make this work.

CSS Tricks has an excellent guide on all the different flexbox properties and how they function. I use it constantly when developing any layout with flexbox; it's a nice reference tool.


1,207 5 19