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 content blocks has a block of text on the left and then an image on the right. In another content block, I have an image on the left and block of the text on the right. But, in both of these content blocks, the text block and image will become full width in mobile putting them on singular rows. What I would like to have is for the text to be displayed first and then the image second and I would like to have this for both sections.

Would anyone be able to suggest any CSS that would be able to do this? People have suggested Z-Index, but I know that doesn't work for me. Unless I've been using it wrong!

Unfortunately, I am unable to share any screenshots or code as it is not my email and belongs to a client.

回答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>

回答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>

来源：https://stackoverflow.com/questions/62874265/setting-a-content-stacking-order-in-mobile-html-emails