zurb-油墨中的反列顺序

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