/ / umgekehrte Spaltenreihenfolge in Zurb-Tinte - Zurb-Tinte

umgekehrte Spaltenreihenfolge in Zurb-Tinte - Zurb-Tinte

In der Desktopansicht möchte ich die Bildspalte nach rechts und die Textspalte nach links ausrichten, aber in der mobilen Ansicht sollte das Bild oben sein

Wie kann ich die Reihenfolge der Spalten umkehren?

    <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="/images/assets/img/item-2.jpg" alt="" class="small-float-center float-right"/>
</columns>
</row>

Antworten:

1 für die Antwort № 1

Benutze die dir Attribut.

<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="/images/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>

Dies zeigt den Inhalt von links nach rechts auf dem Desktop, aber das Bild oben auf dem Handy.

Lösung gefunden hier: http://zurb.com/university/lessons/get-your-responsive-emails-in-order