Html 响应电子邮件模板定位问题

我正在尝试创建一个响应性HTML电子邮件模板，但我在弄清楚如何让我的元素按照我想要的方式定位自己时遇到了一点困难

在我下面的代码中，您将看到我在一些文本旁边有一个图像

当屏幕变小（<700px）时，我希望图像位于文本上方。不低于目前的水平

当前标题部分不会在整行上居中。它保持更左对齐：

<tr>
   <td align="center">
     <h3>Thank you for reserving your deal with us!</h3>
    </td>
 </tr>

感谢您保留与我们的交易！
您的个人代码：JNk1u7
请带上这封电子邮件的打印件，或者简单地记下您的个性化交易代码，以便您在来取时获得这些信息
查看您的交易
请随时联系，确认交易的任何细节，或询问您可能有的任何问题。我们期待着很快见到你！
约翰·史密斯总销售经理

我先谈谈你的第二点。

.wrapper

中的表有两列（

class=“column”

），但第一行和最后一行只有一列，并且没有设置为跨两列。这会导致表格布局出现问题。下面是一个示例，使用：

正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：14px；
背景色：#e7e7e7；
}
#父表{
背景色：fff；
保证金：自动；
边框底部：10px实心#007dc3；
-moz盒阴影：0px 3px 15px rgba（0,0,0,0.2）；
-网络工具包盒阴影：0px 3px 15px rgba（0,0,0,0.2）；
盒影：0px 3px 15px rgba（0,0,0,0.2）；
}
运输署{
填充：10px；
}
＊东区{
填充：10px 20px；
}
段落{
字体家族：继承；
线高：22px；
字体大小：300；
颜色：#3b3b
}
.btn{
显示：内联块；
填充：6px 12px；
页边距底部：0；
字体大小：14px；
字体大小：400；
线高：1.42857143；
文本对齐：居中；
空白：nowrap；
垂直对齐：中间对齐；
-ms触摸动作：操作；
触摸动作：操作；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
背景图像：无；
边框：1px实心透明；
边界半径：3px；
-moz盒阴影：0px 3px 15px rgba（0,0,0,0.2）；
-网络工具包盒阴影：0px 3px 15px rgba（0,0,0,0.2）；
盒影：0px 3px 15px rgba（0,0,0,0.2）；
}
.代码{
背景色：#007dc3；
颜色：白色；
盒影：0px 0px 15px rgba（0,0,0,0.2）；
-moz盒阴影：0px 0px 15px rgba（0,0,0,0.2）；
-webkit盒阴影：0px 0px 15px rgba（0,0,0,0.2）；
}
.td代码{
填充：10px；
文本对齐：居中；
}
.查看交易按钮{
颜色：fff；
背景色：#007dc3；
字体家族：继承；
字体大小：15px；
}
.vehilce img{
位置：相对位置；
}
.车辆img img{
宽度：400px；
}
.联系方式{
字体大小：15px；
填充物：5px；
}
#商标{
文本对齐：居中；
填充：8px；
字体大小：9px；
保证金：自动；
颜色：#3b3b；
}
@仅介质屏幕和（最大宽度：700px）{
.包装表{
宽度：100%；
}
.wrapper.column{
宽度：100%；
显示：块；
}
}

感谢您保留与我们的交易！
您的个人代码：JNk1u7
请带上这封电子邮件的打印件，或者简单地记下您的个性化交易代码，以便您在来取时获得这些信息
查看您的交易
请随时联系，确认交易的任何细节，或询问您可能有的任何问题。我们期待着很快见到你！
约翰·史密斯总销售经理

<tr>
  <td>
     <hr>
  </td>
</tr>