html - Zurb INK 中的推拉表

Question

在我正在创建的 INK HTML 时事通讯中，我将一行分成 2 个表格，每张有 6 列。左边的表格是文本，右边是图像。当在手机上阅读电子邮件时，我希望图像首先出现，文本出现在图像下方。在 Zurb Foundation (for Sites) 中，这可以使用推拉来完成。有没有办法在 INK 中实现相同的效果。由于 INK 使用表格，因此问题将是交换表格单元格。我尝试使用 Foundation 的代码创建用于推送和拉取的内联 CSS，但它只是将单元格内容向右或向左移动（意料之中）

Answer 1

您可以使用我不久前提出的解决方案自己添加此功能。

诀窍是dir控制列如何显示的参数。

<table class="row" dir="rtl" >
  <tr>
    <td class="wrapper last">

      <table class="six columns">
        <tr>
          <td dir="ltr" align="right">

            [RIGHT CONTENT HERE]

           </td>
           <td class="expander"></td>
         </tr>
       </table>

     </td>
     <td class="wrapper" dir="ltr" align="left">

       <table class="six columns">
         <tr>
           <td >

             [LEFT CONTENT HERE]

           </td>
         <td class="expander"></td>
       </tr>
     </table>
   </td>
 </tr>
</table> 

在桌面电子邮件客户端上，这将在右侧显示第一列，在左侧显示第二列。在支持响应式电子邮件的移动客户端上，第一列将显示在第二列上方。

Answer 2

由于 Zurb Ink 目前没有推/拉功能，我认为最接近该功能的将是使用可见性类。