zurb-ink 中的反向列顺序

Question

在桌面视图中，我想将图像列右对齐，文本列左对齐，但在移动视图中，图像应该在顶部

如何反转列的顺序？

    <row>
      <columns small="12" large="6" class="text-container text-left small-text-center">
          <h1 class="text-left">Title</h1>
          <p>Copy</p>
          <button href="zurb.com">Meer weten</button>
      </columns>
      
        <columns small="12" large="6" class="collapse visual-container">
          <img src="assets/img/item-2.jpg" alt="" class="small-float-center float-right"/>
      </columns>
    </row>

Answer 1

使用 dir 属性。

<table class="row" dir="rtl">
  <tr>

    <td class="wrapper" dir="ltr">

      <table class="four columns" >
        <tr>
         <td class="center" align="center">
           <center>
             <img class="center" src="http://placekitten.com/g/600/600" 
             width="128" height="154" alt="Majestic Kitty" />
           </center>
         </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>

    <td class="wrapper last" dir="ltr">

      <table class="eight columns">
        <tr>
          <td>
            <p>Lorem ipsum dolor sit amet, beatae deserunt!</p>
          </td>
          <td class="expander"></td>
        </tr>
      </table>

    </td>
    
  </tr>
</table>

这在桌面上从左到右显示内容，但在移动设备上显示顶部的图像。

在此处找到解决方案：http://zurb.com/university/lessons/get-your-responsive-emails-in-order

zurb-ink 中的反向列顺序

reverse column order in zurb-ink

zurb-ink