I'm using an Outlook conditional to insert "</td><td>" and force a nested table to align to the right of another nested table. It's working fine, but I need the right table to display on top of the other table when on a mobile device and I can't think of a way to do that. Normally I'd just reverse the order of the tables and use align to put them where I need them, but the Outlook thing throws a wrench in the works.

I feel like there must be a go-to way to pull this off, but I'm blanking.

Thanks in advance.


<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="w320">
          <tr>
            <td width="30" class="hide"></td>
            <td width="640" class="w320">
                          <!-- DIVIDER -->
            <table width="640" border="0" cellspacing="0" cellpadding="0" class="w320" bgcolor="#103c68">
              <tr>
                <td width="10" height="24"></td>
                <td width="630" class="headerbar" style="font-family:'Helvetica Neue LT Pro', Arial, sans-serif; font-size:12px; line-height:15px; color:#ffffff; text-align:left;">
                  <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;"><span style="color:#ffffff; text-decoration:none; font-weight:bold;">&nbsp;</span></a>
                </td>
              </tr>
            </table> 
                    <!-- SPACER -->
            <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="30" class="h10"></td></tr></table>

            <!-- SILVER FIRST ROW -->
            <table width="640" border="0" cellspacing="0" cellpadding="0" class="w320">
              <tr>
                <td width="640" valign="top" class="w320">
                <!--[if gte mso 9]>
                <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
                <![endif]-->
                <table width="474" cellpadding="0" cellspacing="0" border="0" align="left" style="display: inline-block" class="block tbl100">
                  <tr>
                    <td width="9" class="w10">&nbsp;</td>
                    <td valign="top" class="w300">
                    <table cellpadding="0" cellspacing="0" border="0" class="w300">
                      <tr>
                        <td valign="top" style="font-family:'Helvetica Neue LT Pro', Arial, sans-serif; font-size:11px; line-height:15px; color:#232323; text-align:left;" class="fs11lh15">
                          <!-- ARTICLE TITLE -->
                          <span style="font-size:12px; line-height:16px; font-weight:bold;" class="fs12lh16"><a href="{sec5_editem1_extra1_link}" name="image_link" target="_blank" style="text-decoration:none; color:#232323;">{sec5_editem1_title}</a></span>
                          <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="10" style="font-size:1px;line-height:1px;">&nbsp;</td></tr></table>

                          <!-- ARTICLE COPY -->
                          {sec5_editem1_text}

                        </td>
                      </tr>
                    </table>

                    <!-- SPACER -->
                    <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="15" class="h10"></td></tr></table>

                    <!-- MOBILE ONLY CTA BUTTON -->
                    <!--[if !mso]><!-->
                    <table width="300" class="w300" border="0" cellpadding="0" cellspacing="0">
                      <tr style="width:0; display:none; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
                        <td width="300" class="w300">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#0097d1">
                          <tr>
                            <td width="9"></td>
                            <td style="font-family:'Helvetica Neue LT Pro', Arial, sans-serif; font-size:12px; line-height:15px; color:#ffffff; text-align:center;" class="fs12lh15">
                              <a href="{sec5_editem1_extra2_link}" target="_blank" style="color:#ffffff; text-decoration:none;"><span style="color:#ffffff; text-decoration:none;">Learn more</span></a>
                            </td>
                            <td width="3"></td>
                            <td align="right"><a href="{sec5_editem1_extra2_link}" target="_blank"><img src="#" border="0" style="display:block" width="18" height="28" /></a></td>
                          </tr>
                        </table>
                        <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="37"></td></tr></table>
                        </td>
                      </tr>
                    </table>
                    <!--<![endif]-->
                    </td> 
                    <td width="10"></td>
                  </tr>
                </table>
                <!--[if gte mso 9]>
                </td><td valign="top">
                <![endif]-->
                <table width="156" cellpadding="0" cellspacing="0" border="0" align="right" style="display: inline-block" class="block tbl100">
                  <tr>
                    <td width="10">&nbsp;</td>
                    <td width="145" valign="top" class="w300">

                    <!-- IMAGE -->
                    <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="3" style="font-size:1px;line-height:1px;">&nbsp;</td></tr></table>
                    <table width="145" cellpadding="0" cellspacing="0" border="0" align="center">
                      <tr>
                        <td><a href="{sec5_editem1_img1_link}" name="image_link" target="_blank"><img src="{sec5_editem1_img1_src}" border="0" style="display:block" width="{sec5_editem1_img1_width}" height="{sec5_editem1_img1_height}" alt="{sec5_editem1_img1_alt}" title="{sec5_editem1_img1_alt}" /></a></td>
                      </tr>
                    </table>

                    <!-- SPACER -->
                    <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="20"></td></tr></table>

                    <!-- DESKTOP ONLY CTA BUTTON -->
                    <table cellpadding="0" cellspacing="0" border="0" bgcolor="#0097d1" class="hide">
                      <tr>
                        <td width="127" class="hide" style="font-family:'Helvetica Neue LT Pro', Arial, sans-serif; font-size:12px; line-height:15px; color:#ffffff; text-align:center;">
                          <a href="{sec5_editem1_extra2_link}" target="_blank" style="color:#ffffff; text-decoration:none;"><span style="color:#ffffff; text-decoration:none;">Learn more</span></a>
                        </td>
                        <td width="18" align="right" class="hide"><a href="{sec5_editem1_extra2_link}" target="_blank"><img src="#" border="0" style="display:block" width="18" height="28" /></a></td>
                      </tr>
                    </table>
                    <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="30" class="hide"></td></tr></table>
                    </td>
                    <td width="1" class="w10"></td>
                  </tr>
                </table>
                <!--[if gte mso 9]>
                </td></tr></table>
                <![endif]-->

                </td>
              </tr>
            </table>


            </td>
            <td width="30" class="hide"></td>
          </tr>
        </table>