So I want to be able to swap the direction of tables (want it to go RTL on mobile) for certain designs. I know this works when the table is simply two <TD>'s inside, but what if my layouts are two nested tables? I can't seem to get this to work. My code structure is like this:

<!-- ********** 30-70 split column module ********** -->
<table cellspacing="0" cellpadding="0" align="center" border="0" width="100%">
<tr>
<td class="section-padding">
<table dir="rtl" class="responsive-table" cellspacing="0" cellpadding="0" align="center" border="0" width="500">
<tr>
<td dir="ltr">
<!-- Column -->
<table class="column" cellspacing="0" cellpadding="0" align="left" border="0" width="28%" valign="top">
<tr>
<td class="h3">Left</td>
</tr>
<!-- Image -->
<tr>
<td valign="top" width="100%" align="center">
<img width="142" src="https://dummyimage.com/284x284/efefef/888888.png&text=[284x284]" alt="Image" />
</td>
</tr>
<tr>
<td width="100%" class="caption">Image caption</td>
</tr>
<tr>
<td>
<table class="mobile-only" height="20" cellspacing="0" cellpadding="0" align="left" border="0" width="100%" bgcolor="#ffffff">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<!-- Column -->
<table class="column" cellspacing="0" cellpadding="0" align="right" border="0" width="69%" valign="top">
<tr>
<td class="h3">Right</td>
</tr>
<!-- Paragraph -->
<tr>
<td class="body-copy" width="100%" valign="top">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo, voluptates modi fuga est culpa maxime vero maiores sequi quas optio dolorem nemo quae, voluptas magnam cumque! Odit, aut, autem!
</td>
</tr>
include "_hyperlink.html"
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ********** End 30-70 split column module ********** -->