I'm working on an HTML email template, and I'm trying to make sure it displays properly on mobile devices. Currently, I have an image followed by text and a button, but on mobile, I'd like the image to be displayed first, followed by the text and button.
https://jsfiddle.net/v2qa6u73/
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" class="stylingblock-content-wrapper" style="background-color: #ffffff; ">
<tbody><tr>
<td style="padding: 0px 50px 20px;background-color: #ffffff; " class="stylingblock-content-wrapper camarker-inner">
<table cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;">
<tbody>
<tr>
<td valign="top" class="responsive-td" style="width: 50%; padding-left: 0px;padding-top:0px;">
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; max-width:600px;" class="stylingblock-content-wrapper">
<tbody>
<tr>
<td style="padding: 10px 10px 20px 0px;" class="stylingblock-content-wrapper camarker-inner">
<div style="color: #000000; font-family:Helvetica, Verdana, Sans-Serif, Arial; font-style: normal; font-weight: normal; line-height: 100%; text-align: left;">
<span style="font-family: Helvetica, Verdana, Sans-Serif, Arial; font-size: 21px; line-height:120%;">
<b>yhtyr urye jytrj utrjutyj uyk yu kuy uyk iykiy kiuyk uyjuyjku yjk uyk uyk uy kuyk uy</b>
<br>
<br>
<span style="font-family: Helvetica, Verdana, Sans-Serif, Arial; font-size: 15px; line-height:22px;">hgfdjdf jdf jhgfjhg jgfhjghkj futjk jgufjmgh kjghjk ghjk hjkjhk gh kjh gkjhk jhgk jhk hjk jghk kgjh k jhgk jhgk jhk yuykuyk ufkuyk uyf ukfkfukufk ufk uf kufk uf kfu </span>
</span>
</div>
</td>
</tr>
<tr>
<td align="center" role="presentation" valign="middle" class="innertd buttonblock" style="border-radius: 50px; cursor: auto; mso-padding-alt: 10px 25px; background: #ffae00; -moz-border-radius: 50px; -webkit-border-radius: 50px; color: #000000;">
<a align="center" target="_blank" id="button" class="buttonstyles" style="display: block; color: #000000; font-family:Helvetica, Verdana, Sans-Serif, Arial; font-size: 16px; line-height: 140%; font-weight: normal; margin: 0px; text-decoration: none; text-transform: none; mso-padding-alt: 0px; text-align: center; padding: 5px 25px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;" href="" title=" button" data-linkto="https://">button</a>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="middle" class="responsive-td" style="width: 50%; padding-right: 0px; background-color: transparent;">
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: transparent; min-width: 100%;" class="stylingblock-content-wrapper">
<tbody>
<tr>
<td align="center" style="padding-top:20px;padding-bottom: 10px;">
<img src="https://cdn2.iconfinder.com/data/icons/web-and-mobile-ui-volume-15-1/48/718-512.png" alt="Icon" width="200" style="display: block; padding: 0px 0px 0px 0px; text-align: center; width: 220px; border: 0px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr></tbody>
</table>Could someone please help me achieve this? Thank you!
I've tried rearranging the HTML structure, but I'm not getting the desired result.
You can use the dir="rtl" trick. The theory is that you will get the stack to flow in the opposite direction by changing the direction of the table structure, but then within that table, change the direction back to "ltr" so you can still read it properly. That isolates the direction change to the structure itself.
<td>, add dir="rtl"<tables> with content, add dir="ltr"