我正在开发 HTML 电子邮件模板，并试图确保它在移动设备上正确显示。目前，我有一个图像，后跟文本和一个按钮，但在移动设备上，我希望首先显示图像，然后显示文本和按钮。
https://jsfiddle.net/v2qa6u73/
<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">
<table cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;">
<tbody>
<tr>
<td valign="top" class="responsive-td" 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>
<td valign="middle" class="responsive-td" 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>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
有人可以帮我实现这个目标吗？谢谢！
我尝试重新排列 HTML 结构，但没有得到所需的结果。
您可以使用 dir="rtl" 技巧。理论上，您可以通过更改表结构的方向来使堆栈沿相反方向流动，但然后在该表中将方向更改回“ltr”，以便您仍然可以正确读取它。这隔离了结构本身的方向变化。
<td><tables>