Html 如何使此电子邮件签名响应迅速/便于移动？

我有一个电子邮件签名，它由一个简单的表（一行两列）组成。第一栏有一个徽标，第二栏有所有联系方式

我想让它具有响应性，以便在小型设备上，徽标显示在上面，联系人详细信息显示在下面（有效地将列变成行）。目前，在小型设备上，表格会被压缩，因此无法读取联系人详细信息

<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
  <div class="m_159975109461180827gmail_signature">
    <div dir="ltr">
      <div dir="ltr">
        <table style="color: #000000; font-family: 'Times New Roman'; font-size: medium; background: none; margin: 0px; padding: 0px; border: 0px initial initial;" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="font-family: arial, sans-serif; margin: 0px; border-top: 0px; border-right-width: 3px; border-right-color: #d2ac67; padding: 0px 7px 0px 0px; vertical-align: middle;" valign="top"><img class="CToWUd" src="http://mywebsite.com/logo-small.png" alt="" /></td>
              <td style="font-family: arial, sans-serif; margin: 0px; padding: 0px 0px 0px 12px;">
                <table style="background: none; margin: 0px; padding: 0px; height: 93px; border: 0px initial initial;" border="0" width="300" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; padding-bottom: 5px; color: #d2ac67; font-size: 14px;" colspan="2"><strong>My Name</strong></td>
                    </tr>
                    <tr>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; color: #333333; font-size: 12px;" colspan="2"><span style="color: #d2ac67;">My position&nbsp;&bull;&nbsp;Name of the company</span></td>
                    </tr>
                    <tr>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">p:</td>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top"><a style="color: #1155cc;" href="tel:+44%2020%207099%206646" target="_blank">+44 1234566</a>&nbsp;&nbsp;<span style="color: #d2ac67;">m:&nbsp;</span><a style="color: #1155cc;" href="tel:+44%207491%20044801" target="_blank">+44&nbsp;1</a>234567</td>
                    </tr>
                    <tr>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">a:</td>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">some addresss</td>
                    </tr>
                    <tr>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">w:</td>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">link to the website</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

我的名字
我的立场&bull；公司名称
p:
m:234567
a:
一些地址
w:
链接到该网站

---

提前感谢您的帮助/指导。

如果您想使用一个表，请创建另一个以行为列的表，并为每个表分配一个类。使用css通过媒体调用隐藏和显示不同的表。

这是唯一/最平滑的方法吗？我宁愿避免代码加倍，尤其是对于电子邮件签名。也许如果我将徽标放在桌子外面（但放在有联系人数据的桌子的左边），然后为桌子添加固定宽度，桌子将“松开”，并在窄屏幕上移动到下面？您可以将图像和桌子放在单独的div标签中，然后使用媒体查询根据屏幕大小更改它们的位置