反向列的顺序在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