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.

 

  • Pauline Sdrigotti

    You can do this without CSS. If you have two stackable tables (one aligned left other aligned right) you just need to place the aligned right table on top of the aligned left in your HTML file. This has always worked for me.

  • Mike Ragan

    Hi Pauline, thanks for your comment. This article pertains specifically to the column splitting method (where we use “float” or “display:block”) vs the table aligned method. (See http://labs.actionrocket.co/stacking#more-23) Some people prefer building emails in this way. You are right, we can align tables left and right, we talk more about this in our articles on the table align method and the joys it brings us. Happy coding!

  • responsive_email

    Unfortunatly Android KitKat, with has a more and more raising market share, is only supporting the table align method. So I agree, I would go with that

  • http://www.uglyfashionmedia.com/ Eoin

    Why have you included split=float:left. I couldn’t find any markup for a class called split.

  • http://www.uglyfashionmedia.com/ Eoin

    If you do the table aligned method will your content align centrally when viewed on a mobile phone? That is the benefit of creating emails using this methodology.