On desktop I have two tables. Image on top, text on the bottom. I want these to stack side by side on mobile. This is the reverse of what normally occurs with responsive tables.

I've tried several different methods. CSS from the style tag and HTML for one of these methods is listed below.

Desktop:
| 1 |

| 2 |

Mobile
| 1 | | 2 |

td[class="leftCol"] { display: table-left-group; }
td[class="rightCol"] { display: table-right-group; }


<!-- Begin Product Showcase -->

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="imageblock" bgcolor="#fefefe">
    <tr>
    <td bgcolor="#fefefe" class="hide" width="20">&nbsp;</td>
    <td class="imageblock" style="padding-bottom:20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="mimage">
    <tr>    
        <td bgcolor="#fefefe" valign="top" align="center" class="leftCol"> 

        <table width="270"  border="0" cellpadding="0" cellspacing="0" class="mimage2" >
            <tr>
                <td bgcolor="#fefefe"><a href="http://www.backcountry.com/Store/content/contentLanding.jsp?contentId=1100024&cmp_id=EM_BC_`mmid`_S2&mv_pc=r105" style="text-decoration:none;"><img class="m2across2" src="image.jpg" alt="" name="sub_01" width="270" border="0" id="promo_top_slice" style="color:#fefefe; align:center; display:block; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:15px;text-decoration:none;"/></a></td>
</tr></table></td></tr>

<tr>
<td bgcolor="#fefefe" valign="top" align="center" class="rightCol" style="padding-bottom:20px;"> 
        <table width="270"  border="0" cellpadding="0" cellspacing="0" class="mimage" >
<tr>
        <td bgcolor="#fefefe" valign="top" align="center" class="imageblock" > 
        <table width="270" border="0" cellpadding="0" cellspacing="0" class="m2across2">
            <tr>
                <td bgcolor="#fefefe" style="text-align:left; padding-left:20px; padding-right:20px; padding-top:20px;" valign="middle">
                  <div><a href="#/?cmp_id=EM_BC_`mmid`_M1&mv_pc=r105&no_mobile=1" style="text-decoration:none; color:#222222; font-size:16px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;"><span>Subhead</span></a></div></td>
</tr>
<tr>
                <td bgcolor="#fefefe" style="text-align:left; padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px;" valign="middle">
                  <div><a href="#/?cmp_id=EM_BC_`mmid`_M1&mv_pc=r105&no_mobile=1" style="text-decoration:none; color:#222222; font-size:14px; font-weight:normal; font-family:Arial, Helvetica, sans-serif; line-height:16px;"><span>Lorum ipsum dolor sit amet, vel postea quaeaue fastidii no, nec ne tacimmated definitionem, vim dicat adversarium cituperatoribus id. </span></a></div></td>
</tr>
        </table>
        </td></tr>

<tr>

      <td align="center" valign="middle" bgcolor="#399ac7" height="40" width="270"><a href="http://www.backcountry.com/sc/semi-annual-sale?cmp_id=EM_BC_`mmid`_S1&mv_pc=r105" style="text-decoration:none; color:#fefefe; font-family:Arial, Helvetica, sans-serif; font-size:15px; display:block; font-weight:bold; line-height:40px;"><span>Shop This Product</span></a></td>
            </tr>
            </table>
            </td>
        </tr>           
        </table>
        </td>

        <td bgcolor="#fefefe" class="hide" width="20">&nbsp;</td>
        <td class="imageblock" style="padding-bottom:20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="mimage">
    <tr>    
        <td bgcolor="#fefefe" valign="top" align="center" class="leftCol"> 

        <table width="270"  border="0" cellpadding="0" cellspacing="0" class="mimage2" >
            <tr>
                <td bgcolor="#fefefe"><a href="http://www.backcountry.com/Store/content/contentLanding.jsp?contentId=1100024&cmp_id=EM_BC_`mmid`_S2&mv_pc=r105" style="text-decoration:none;"><img class="m2across2" src="image.jpg" alt="" name="sub_01" width="270" border="0" id="promo_top_slice" style="color:#fefefe; align:center; display:block; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:15px;text-decoration:none;"/></a></td>
</tr></table></td></tr>

<tr>
<td bgcolor="#fefefe" valign="top" align="center" class="rightCol" style="padding-bottom:20px;"> 
        <table width="270"  border="0" cellpadding="0" cellspacing="0" class="mimage" >
<tr>
        <td bgcolor="#fefefe" valign="top" align="center" class="imageblock" > 
        <table width="270" border="0" cellpadding="0" cellspacing="0" class="m2across2">
            <tr>
                <td bgcolor="#fefefe" style="text-align:left; padding-left:20px; padding-right:20px; padding-top:20px;" valign="middle">
                  <div><a href="#/?cmp_id=EM_BC_`mmid`_M1&mv_pc=r105&no_mobile=1" style="text-decoration:none; color:#222222; font-size:16px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;"><span>Subhead</span></a></div></td>
</tr>
<tr>
                <td bgcolor="#fefefe" style="text-align:left; padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px;" valign="middle">
                  <div><a href="#/?cmp_id=EM_BC_`mmid`_M1&mv_pc=r105&no_mobile=1" style="text-decoration:none; color:#222222; font-size:14px; font-weight:normal; font-family:Arial, Helvetica, sans-serif; line-height:16px;"><span>Lorum ipsum dolor sit amet, vel postea quaeaue fastidii no, nec ne tacimmated definitionem, vim dicat adversarium cituperatoribus id. </span></a></div></td>
</tr>
        </table>
        </td></tr>

<tr>

      <td align="center" valign="middle" bgcolor="#399ac7" height="40" width="270"><a href="http://www.backcountry.com/sc/semi-annual-sale?cmp_id=EM_BC_`mmid`_S1&mv_pc=r105" style="text-decoration:none; color:#fefefe; font-family:Arial, Helvetica, sans-serif; font-size:15px; display:block; font-weight:bold; line-height:40px;"><span>Shop This Product</span></a></td>
            </tr>
            </table>
            </td>
        </tr>           
        </table>
        </td>
        <td bgcolor="#fefefe" class="hide" width="20">&nbsp;</td>
    </tr>
</table>
<!-- End Product Showcase -->