Html Emailer Shifting Changing The Position Of Tables

Hello i am doing a html mailer and i'm really facing a big problem and i;m failing to fix it. i have two tables in my html mailer and i want it to be responsive on phones i found a

Solution 1:

There's a lot going on in this question. The answer to the basic question "How do I get the table on the right to be on top for the responsive layout," is in the DIR attribute. In your layout, you'll actually build the email backwards with the right column on the left and the left column on the right. However in the main table, set dir='rtl' to flip it. (Inside, set the container table's TDs to dir='ltr' to fix the content direction.

This is pseudocode:

<tabledir="rtl"><tr><tddir="ltr"><table>Right column contents</table></td><tddir="ltr"><table>Left column contents</table></td></tr></table>

Full example is here: http://codepen.io/stg/pen/rxVWRR

Note, this was a quick-dirty example - media queries/style blocks are not at all supported by Gmail client for mobile devices. This example has a desktop-first media query.

EDIT - mobile-first pen: http://codepen.io/stg/pen/xZGjBz