HTML邮件模板移动端内容重排求助：图片优先显示

要实现桌面端左文本右图片、移动端图片在前、文本按钮在后的效果，需要结合媒体查询和邮件客户端兼容处理，以下是具体实现方案：

核心思路 #

利用CSS媒体查询针对移动端调整单元格显示顺序，同时通过条件注释兼容Outlook桌面版（不支持flex和部分响应式属性）。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式邮件模板</title>
  <style>
    /* 基础样式 */
    body { margin: 0; padding: 0; }
    table { border-collapse: collapse; }
    
    /* 移动端响应式样式 */
    @media only screen and (max-width: 600px) {
      .flex-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
      }
      .responsive-td {
        width: 100% !important;
        display: block !important;
      }
      .image-col {
        order: 1 !important;
        margin-bottom: 20px !important;
      }
      .text-col {
        order: 2 !important;
      }
      /* 调整移动端内边距，优化显示 */
      .stylingblock-content-wrapper.camarker-inner {
        padding: 0 20px 20px !important;
      }
      .text-col .stylingblock-content-wrapper.camarker-inner {
        padding-right: 0 !important;
      }
    }
  </style>
  <!-- Outlook桌面版兼容处理 -->
  <!--[if mso]>
  <style>
    .flex-container { display: table !important; }
    .responsive-td { width: 50% !important; display: table-cell !important; }
    .image-col, .text-col { order: initial !important; }
  </style>
  <![endif]-->
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" class="stylingblock-content-wrapper" style="background-color: #ffffff; ">
  <tbody>
    <tr>
      <td style="padding: 0px 50px 20px;background-color: #ffffff; " class="stylingblock-content-wrapper camarker-inner">
        <!-- 添加flex-container类，用于移动端调整顺序 -->
        <table cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;" class="flex-container">
          <tbody>
            <!-- 文本列添加text-col类 -->
            <td valign="top" class="responsive-td text-col" style="width: 50%; padding-left: 0px;padding-top:0px;">
              <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; max-width:600px;" class="stylingblock-content-wrapper">
                <tbody>
                  <tr>
                    <td style="padding: 10px 10px 20px 0px;" class="stylingblock-content-wrapper camarker-inner">
                      <div style="color: #000000; font-family:Helvetica, Verdana, Sans-Serif, Arial; font-style: normal; font-weight: normal; line-height: 100%; text-align: left;">
                        <span style="font-family: Helvetica, Verdana, Sans-Serif, Arial; font-size: 21px; line-height:120%;">
                          <b>yhtyr urye jytrj utrjutyj uyk yu kuy uyk iykiy kiuyk uyjuyjku yjk uyk uyk uy kuyk uy</b><br><br>
                          <span style="font-family: Helvetica, Verdana, Sans-Serif, Arial; font-size: 15px; line-height:22px;">hgfdjdf jdf jhgfjhg jgfhjghkj futjk jgufjmgh kjghjk ghjk hjkjhk gh kjh gkjhk jhgk jhk hjk jghk  kgjh k jhgk jhgk jhk yuykuyk ufkuyk uyf ukfkfukufk ufk uf kufk uf kfu </span>
                        </span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td align="center" role="presentation" valign="middle" class="innertd buttonblock" style="border-radius: 50px; cursor: auto; mso-padding-alt: 10px 25px;  background: #ffae00; -moz-border-radius: 50px; -webkit-border-radius: 50px; color: #000000;">
                      <a align="center" target="_blank" id="button" class="buttonstyles" style="display: block; color: #000000; font-family:Helvetica, Verdana, Sans-Serif, Arial; font-size: 16px; line-height: 140%; font-weight: normal; margin: 0px; text-decoration: none; text-transform: none; mso-padding-alt: 0px; text-align: center; padding: 5px 25px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;" href="" title=" button" data-linkto="https://">button</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
            <!-- 图片列添加image-col类 -->
            <td valign="middle" class="responsive-td image-col" style="width: 50%;  padding-right: 0px;  background-color: transparent;">
              <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: transparent; min-width: 100%;" class="stylingblock-content-wrapper">
                <tbody>
                  <tr>
                    <td align="center" style="padding-top:20px;padding-bottom: 10px;">
                      <img src="https://cdn2.iconfinder.com/data/icons/web-and-mobile-ui-volume-15-1/48/718-512.png" alt="Icon" width="200" style="display: block; padding: 0px 0px 0px 0px; text-align: center; width: 220px; border: 0px;">
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

关键说明 #

1. 媒体查询部分：当屏幕宽度≤600px时，将父表格设为flex布局，通过order属性交换图片列和文本列的显示顺序，同时将单元格宽度设为100%，实现单列布局。
2. Outlook兼容：通过条件注释<!--[if mso]>为Outlook桌面版重置样式，保持原有的表格单元格布局，避免兼容问题。
3. 内边距调整：移动端缩小左右内边距，提升阅读体验，同时给图片列添加底部外边距，分隔图片和文本。

内容的提问来源于stack exchange，提问作者JOP