Setting A Content Stacking Order In Mobile (HTML Emails)

I'm currently in the process of building an email, but I'm really struggling to set the stack order of certain content when it is displayed in mobile. For example, one of my conten

Solution 1:

You could try reverse table stacking by combining fixed width tables and align. The align attribute will position them on desktop (text left and image right) and then setting width:100% !important for mobile views will force them to stack in the order of the html (image over mobile)

<table width="600" class="full-width">
  <tr>
    <td>

      <table width="280" align="right" class="full-width">
        <tr>
          <td>image</td>
        </tr>
      </table>

      <table width="280" align="left" class="full-width">
        <tr>
          <td>text</td>
        </tr>
      </table>

    </td>
  </tr>
</table>

If you are using th or td and want to change the stacking order. You can using these display values on the cell display: table-header-group (moves to top of table - your image) and display: table-footer-group (moves to bottom of table - your text).

<table>
  <tr>
    <th class="display-table-footer">text</th>
    <th class="display-table-header">image</th>
  </tr>
</table>

Solution 2:

You can reverse the default stacking order of content using the dir="rtl" property in the table whose stacking order you want to reverse. This technique is documented among other places here. There is also a widely-used template that demonstrates this technique here. A code snippet for a table using this technique is included below - for the complete sample including CSS see the link to the Cerberus template above. Note: HTML email device support is always in flux so it's recommended to test this solution in an email testing service such as Email on Acid or Litmus before sending.

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: auto;" class="email-container">
        <!-- Thumbnail Right, Text Left : BEGIN -->
        <tr>
            <td dir="rtl" width="100%" style="padding: 10px; background-color: #ffffff;">
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <!-- Column : BEGIN -->
                        <th width="33.33%" class="stack-column-center">
                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td dir="ltr" valign="top" style="padding: 0 10px;">
                                        <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="center-on-narrow" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <!-- Column : END -->
                        <!-- Column : BEGIN -->
                        <th width="66.66%" class="stack-column-center">
                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow">
                                        <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Class aptent taciti sociosqu</h2>
                                        <p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                                        <!-- Button : BEGIN -->
                                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
                                            <tr>
                                                <td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
                                                    <a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
                                                </td>
                                            </tr>
                                        </table>
                                        <!-- Button : END -->
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <!-- Column : END -->
                    </tr>
                </table>
            </td>
        </tr>
        <!-- Thumbnail Right, Text Left : END -->
    </table>