Reverse stack using table-align based methods

A lot has been written before about different types of email, the table-align method is a very popular choice with email designers/developers, as it allows layout change to occur with or without a doctype being present, therefore making it a more robust method than using the column splitting method.

This means that we can stack content in android devices using table-align. One step on from that we can trigger layout change without doctype or even media queries by using the hybrid coding approach.

One of the drawbacks from this was always the impact on desktop alignment addressed here, the other problem is that we can’t reverse the stacking order very easily like we can using column split here. Well, here we have a way which appears to work pretty universally.

Simply put, it is like this:

<div class="foot">
<table align="left">
 <tr>
  <td>LEFT POD</td>
 </tr>
</table>
</div>

<div class="head">
<table align="right">
 <tr>
  <td>RIGHT POD</td>
 </tr>
</table>
</div>

So what we do is wrap a div around each pod and then tell it to behave like a table, specifically like either a header or a footer in the CSS using:

@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
*[class=head]{ display:table-header-group !important; width:100% !important;}
*[class=foot]{ display:table-footer-group !important; width:100% !important;}
}

Campaign Monitor posted a great article about centralising stacked content when optimising without media queries, and this technique can be expanded upon for reverse stacking in hybrid layouts.

Here is the codepen example of a working two column hybrid section, for you to see in action feat. Steven Segal.

It isn’t 100% perfect. There’s a really interesting glitch where if you resize the browser it may not take initially and then when the page is refreshed the head and foot swap around. But in the real world its pretty much only us #emailgeeks that are resizing emails in the browser and cheering/booing depending upon the outcome. And obviously it doesn’t reverse in the gmail app, because gmail app is laughably poor as a mail client, someone should tell them it’s nearly 2015.