How to make content reverse stack on mobile

One of the advantages of the column splitting method as described in a previous post is that we can perform miracles such as getting content to stack from left to right OR right to left. In fact we can get intense about it and switch content around at seemingly at will, crucially without the need for duplication.

This is most commonly needed when designing pods to zig-zag, in order it create  better eye-flow on desktop i.e. image and text alternate. This means that on the mobile version, however, we may end up with double images and not a nice clean text/image sandwich. As email designers we might want to have control of this and use both images effectively to compliment the text, and flow properly.

This is where the CSS comes in:

@media screen and (max-width: XXX) {
*[class=caption]{display:table-caption!important; width:100%!important;}
*[class=head]{display:table-header-group!important; width:100%!important;}
*[class=foot]{display:table-footer-group!important; width:100%!important;} 
*[class=split]{float:left!important; width:100%!important;} 
}

Whereby we use the “head” and “foot” classes to change table layout after query has fired. So the td’s behave like blocks and stack normally, then switches the top and bottom elements using group hierarchy. Sounds like it’s made up but it isn’t – give it a go. We go even further using table-caption to jump to the very top, but the more complex, as ever, the more fragile it becomes. As with all email code snippets you find on the internet: be code aware – enjoy responsibly – test, test and test some more!

Codepen: http://codepen.io/actionrocket/pen/wAbzD/

The old fashioned work around for this is to simply drop off one of the images or change the desktop design to avoid the zig-zag pattern. Or use show hide and double up on content. As a general rule we don’t believe in ‘compromising’ the desktop version for the sake of mobile, we believe in providing the best user experience for both.

This technique works very well, only coming unstuck with particularly hostile environments that strip Doctype and consequently only have partial media query support. Also, it may seem a little fragile at times for example, if you resize your browser several times in Safari: it just “stops working”. But in real life, where email recipients aren’t sat there resizing their browser (that’s just for us email geeks), it can be pretty darn useful.

Have a go with it, see what happens. Remember, email code can be a little fickle, what works today may not tomorrow. That’s why we love it! If you can hack it more and get it to do something else cool, then let us know.