Content Choreography Mixin

With woop.ie templates we like to re-order the display of blocks of content depending on screen-size. For example, in some templates we put headings first for mobile, but for lager screens we have hero images appear first. We were using display: table; caption-side: top; to achieve this but have switched to flexbox based on Jordan Moore’s excellent article on content choreography.

Below is a little mixin I wrote to make it simple with Sass. Just add this as a mixin:

add this to the containing block:

@include boxit(vertical);

and this to each item you want to reorder (changing the number to the order you want it to appear in - here we are swapping headings as an example):

h1 { @include boxnum(2);}
h2 { @include boxnum(1);}


If you can think of ways to improve this please tweet me @irishstu