html - dir 标签将内容推送到移动端

Question

我正在使用 dir 标签将桌面上并排的内容在移动设备上堆叠(从右到左)。但它似乎将文本推到一边而不是将其包裹在图像下方。

<table class="deviceWidth" dir="rtl"  width="100%" 
cellpadding="0" cellspacing="0" border="0" style="border-collapse:
 collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">

  <tr>
    <td width="50%" dir="ltr" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0;   margin:0;">
       <a href="#"><img src="image.jpg" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
      </p>                  
    </td>
    <td width="50%" dir="ltr" align="left" class="full" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#000000;line-height:18px; padding: 5px;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.                       
    </td>
  </tr>
</table>

连同:

 @media only screen and (max-width:620px) {
 table[id=container] .full {
 display:block !important;
 width:100% !important;
 }

在桌面上一切正常，但当我切换到移动 View 时，图像变大，文本被推到侧面的一个较小的列中，我似乎无法弄清楚这个问题。

任何帮助将不胜感激!

Answer 1

更新 HTML

现场演示 fiddle Here并调整输出大小，然后在 fiddle 中检查它。

@media only screen and (max-width:620px) {
 table[id=container] .full {
 display:block !important;
 width:100% !important;
 }

<table class="deviceWidth" dir="rtl"  width="100%" 
cellpadding="0" cellspacing="0" border="0" style="border-collapse:
 collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">

  <tr>
    <td width="50%" dir="ltr" align="right" class="full" style="position:relative">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0;   margin:0; position:absolute;top:0;right:0;">
       <a href="#"><img src="image.jpg" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
      </p>                  
    </td>
    <td width="50%" dir="ltr" align="left" class="full" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#000000;line-height:18px; padding: 5px;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.                       
    </td>
  </tr>
</table>