如何在响应式电子邮件中使表格堆叠在左边？

Question

所以这是我的第二个响应式设计电子邮件,所以我被卡住了.

在移动设备上查看时,我有2个桌子正在尝试堆叠.以下是2个表格在桌面模式下的显示方式:

|  1  |  2  |

在移动设备上查看时,我希望表格显示为:

|  2  |
|  1  |

我试过浮动表并使用position:fixed !important 但我无法获得所需的效果.任何帮助或指导将不胜感激.

Answer 1

我尝试了另一种解决方案中的方法.

您可以使用它dir="rtl"来控制列的堆叠方式.这是一个例子:

<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="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
      </p>                  
    </td>
    <td width="50%" dir="ltr" align="left" class="full">
      <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                      
    </td>
  </tr>
</table>

结合@media查询:

@media only screen and (max-width: 640px)  {


  .full {
    display:block;
    width:100%;
  }
}

这是完整的jsFiddle.