移动端仅将按钮移至文本下方的实现方案咨询

这个需求完全可以实现，你之前的方法没生效是因为整个布局是嵌套表格结构，只给按钮单元格设置flex无法改变表格的整体排列顺序。下面针对邮件模板的表格布局给出可行方案：

实现思路 #

邮件模板依赖表格布局保证兼容性，所以用双按钮+媒体查询切换显示的方式：

• 桌面端：保留图片下方的按钮，隐藏文本列的按钮
• 移动端：让图片列和文本列垂直堆叠，隐藏图片下方的按钮，显示文本列末尾的按钮

修改后的代码 #

样式部分 #

/* 桌面端默认样式：隐藏移动端按钮 */
.mobile-button {
  display: none !important;
}

@media only screen and (max-width:640px) {
  /* 移动端让左右列垂直堆叠 */
  .image-column, .text-column {
    display: block !important;
    width: 100% !important;
    align: left !important;
    margin-bottom: 20px !important;
  }
  /* 隐藏图片下方的原始按钮 */
  .desktop-button {
    display: none !important;
  }
  /* 显示文本列下方的移动端按钮 */
  .mobile-button {
    display: table !important;
    width: 100% !important;
  }
}

HTML核心修改区域 #

<!-- 左侧图片列：添加image-column类，给按钮容器加desktop-button类 -->
<table width="294" class="image-column w100pc hauto" cellspacing="0" cellpadding="0" border="0" align="left">
  <tr>
    <td width="24"></td>
    <td>
      <table border="0" cellpadding="0" cellspacing="0">
        <!-- 图片部分 -->
        <tr>
          <td class="pc">
            <a href="" style="text-decoration:none;color:#111111;" target="_blank">
              <img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="display:block;" border="0" width="230" height="265" class="w100pc hauto">
            </a>
          </td>
        </tr>
        <tr>
          <td height="24"></td>
        </tr>
        <!-- 桌面端按钮：添加desktop-button类 -->
        <tr class="desktop-button">
          <td>
            <table border="0" cellpadding="0" cellspacing="0" bgcolor="#E5133A" style="border-radius:5px;">
              <tr>
                <td height="15" colspan="3"></td>
              </tr>
              <tr>
                <td width="20"></td>
                <td style="font-family:'Roboto',Arial,sans-serif;font-size:16px;line-height:16px;color:#FFFFFF;font-weight:500;text-align:center;">
                  <a href="" target="_blank" alias="Perfect-Choice" style="color:#FFFFFF;text-decoration:none;"> BUTTON </a>
                </td>
                <td width="20"></td>
              </tr>
              <tr>
                <td height="15" colspan="3"></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td height="30"></td>
        </tr>
      </table>
    </td>
    <td width="10" class="w24"></td>
  </tr>
</table>

<!-- 右侧文本列：添加text-column类 -->
<table width="294" class="text-column w100pc hauto" cellspacing="0" cellpadding="0" border="0" align="left">
  <tr>
    <td width="10" class="w24"></td>
    <td>
      <table border="0" cellpadding="0" cellspacing="0">
        <tr></tr>
        <tr>
          <td height="40"></td>
        </tr>
        <tr>
          <td class="fallback-bold" style="color:#1A1A1A;font-family:'Roboto', Arial, sans-serif;font-weight:bold;font-size:24px;line-height:28px;"> TExt </td>
        </tr>
        <tr>
          <td height="24"></td>
        </tr>
        <tr>
          <td class="fallback" style="color:#1A1A1A;font-family:'Roboto', Arial, sans-serif;font-weight:400;font-size:16px;line-height:22px;"> Last paragrapgh. </td>
        </tr>
        <tr>
          <td height="24"></td>
        </tr>
        <!-- 移动端按钮：添加mobile-button类 -->
        <tr class="mobile-button">
          <td>
            <table border="0" cellpadding="0" cellspacing="0" bgcolor="#E5133A" style="border-radius:5px;">
              <tr>
                <td height="15" colspan="3"></td>
              </tr>
              <tr>
                <td width="20"></td>
                <td style="font-family:'Roboto',Arial,sans-serif;font-size:16px;line-height:16px;color:#FFFFFF;font-weight:500;text-align:center;">
                  <a href="" target="_blank" alias="Perfect-Choice" style="color:#FFFFFF;text-decoration:none;"> BUTTON </a>
                </td>
                <td width="20"></td>
              </tr>
              <tr>
                <td height="15" colspan="3"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td width="24"></td>
  </tr>
</table>

方案优势 #

• 邮件客户端对display: none/block的支持远优于flex或grid，兼容性更强
• 双按钮的方式避免了复杂DOM移动操作，完全通过CSS切换显示状态，适配绝大多数邮件客户端

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