Reverse Column Stacking On Mobile

With responsive HTML emails, you sometimes need to reverse the order in which stacked columns appear on mobile. You might even need to set a custom stacking order for layouts with 3+ columns.

Reverse 2 col

Imagine you have a two column layout, with text on the left and an image on the right:

<table class="w-full" cellpadding="0" cellspacing="0" role="presentation">
    <tr>
        <td class="sm-inline-block w-1-2 sm-w-full px-8">
            <p class="text-2xl font-hairline font-sans text-black">Left text</p>
            <p class="text-grey-dark">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aspernatur.</p>
        </td>
        <td class="sm-inline-block w-1-2 sm-w-full px-8">
            <img src="https://picsum.photos/600/600" alt="">
        </td>
    </tr>
</table>

Naturally, the image will show under the text, when viewed on a mobile device:

Left text Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aspernatur.

However, using Maizzle PHP's custom table display utilities, we can reverse the columns on the mobile breakpoint:

<table class="w-full" cellpadding="0" cellspacing="0" role="presentation">
    <tr>
        <td class="w-1-2 sm-table-footer-group px-8">
            <div class="sm-px-8">
              <h2 class="text-2xl font-hairline font-sans text-black">Left text</h2>
              <p class="text-grey-dark mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aspernatur.</p>
            </div>
        </td>
        <td class="w-1-2 sm-table-header-group px-8">
            <div class="sm-px-8">
              <img src="https://picsum.photos/600/600" alt="">
            </div>
        </td>
    </tr>
</table>

What you need to do is:

1. Use the responsive table-{...}-group utilities on each column, to reverse their order on small screens
2. Wrap the contents of each column in a <div> and use it to set padding for mobile. This is because the CSS properties used to reverse the column order do not support padding

And that would give us:

Left text Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aspernatur.

Reorder 3+ cols

In a similar fashion, we can reorder a 3+ column layout:

<table class="w-full" cellpadding="0" cellspacing="0" role="presentation">
    <tr class="sm-w-full sm-table">
        <td class="w-1-3 sm-table-footer-group px-8">
            <div class="sm-px-8">
              <h2 class="text-xl font-hairline font-sans text-black">Last on mobile</h2>
            </div>
        </td>
        <td class="w-1-3 sm-table-footer-group px-8">
          <div class="sm-px-8">
            <h2 class="text-xl font-hairline font-sans text-black">Second on mobile</h2>
          </div>
        </td>
        <td class="w-1-3 sm-table-caption sm-w-full px-8">
          <h2 class="text-xl font-hairline font-sans text-black">First on mobile</h2>
        </td>
    </tr>
</table>

Only a couple of extra steps:

1. Make the <tr> act as a full width table on mobile, by adding the sm-w-full and sm-table utilities
2. Use sm-table-caption and sm-w-full on the column that you want to display first on mobile

Note: .table-caption supports padding, so you don't need to use a div inside the column.