How to make a stack of tables directly above the left, in a response letter?

Question

So this is my second responsive email design, so I'm stuck.

I have 2 tables that I am trying to stack when browsing on mobile devices. The following shows how the two tables appear in production mode:

|  1  |  2  |

When viewed on a mobile device, I want the tables to be displayed as such:

|  2  |
|  1  |

I tried to float tables and use position:fixed !important, but I can not get the desired effect. Any help or guidance would be greatly appreciated.

Answer 1

I experimented with the ability to do this in a different solution .

dir="rtl" . :

<table class="deviceWidth" dir="rtl"  width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" dir="ltr" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
      <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
      </p>                  
    </td>
    <td width="50%" dir="ltr" align="left" class="full">
      <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                      
    </td>
  </tr>
</table>

@media:

@media only screen and (max-width: 640px)  {


  .full {
    display:block;
    width:100%;
  }
}

jsFiddle.

Answer 2

.

// HTML
<table><tr><td> 2 </td></tr></table>
<table><tr><td> 1 </td></tr></table>

// CSS
table {
    float: right; 
}

jsfiddle ( )