zurb-ink

reverse column order in zurb-ink

in desktop view I want to align the image column to the right and the text column to the left, but in mobile view the image should be on top

how can I reverse the order of the columns?

    <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>

Solution

  • Use the dir attribute.

    <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>

    This shows the content left to right on desktop but the image on top on mobile.

    Solution found here: http://zurb.com/university/lessons/get-your-responsive-emails-in-order