Hey guys, for the longest time - I've been using <td> to stack in mobile. But just recently I discover that my <td> no longer stack and shows side by side specially in Gmail and other mobile clients.

Has anyone experienced this recently?

Here is some of my sample code: 

<table class="mb-100" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" bgcolor="#F5F6F7" style="border-collapse: collapse;">
  <tr>
    <td class="mb-center">
      <table class="mb-87" border="0" cellpadding="0" cellspacing="0" align="center" width="81%" style="border-collapse: collapse;" bgcolor="#F5F6F7">
        <tr>
          <td>
            <table class="mb-100" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" bgcolor="#F5F6F7" style="border-collapse: collapse; text-align: center">

              <tr>
                <!-- Column - 1-->
                <td class="mb-100 mb-inline-block" style="vertical-align: middle; width: 16%; max-width: 50">
                  <img class="mb-25" src="#" style="width: 100%; min-width: 65px" border="0" width="50">
                </td>

                    <!-- Column - 2-->
                <td class="mb-100 mb-block" style="vertical-align: top; width: 3%; height: 10px; font-size: 0px; line-height: 0px">&nbsp;
                </td>

                    <!-- Column - 3-->
                <td class="mb-80 mb-inline-block" style="vertical-align: middle; width: 48%; min-width: 200px;">
                  <table style="width: 100%" style="border-collapse: collapse;" border="0" margin="0">
                    <tr>
                      <td class="mb-center" style="padding:0; margin:0; color: #525050; line-height: 1.2em; font-size: 17px; text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-weight: bold">
                        Not what you're looking for?
                      </td>
                    </tr>
                    <tr>
                      <td height="6" style="font-size: 0px; line-height: 0px;">&nbsp;
                      </td>
                    </tr>
                    <tr>
                      <td class="mb-center" style="padding:0; margin:0; color: #525050; line-height: 1.2em; font-size: 15px; text-align: left; font-family: 'Arial', Helvetica, sans-serif;">
                        Take a look at some of our other recommendation.
                      </td>
                    </tr>
                  </table>
                </td>

                    <!-- Column - 4-->
                <td class="mb-100 mb-inline-block" border="0" cellpadding="0" cellspacing="0" height="10" style="vertical-align: top; width: 3%; font-size: 0px; line-height: 0px">
                </td>

                    <!-- Column - 5-->
                <td class="mb-100 mb-inline-block" align="right" style="padding:0;margin:0;">
                  <div class="mb-center" style="text-align: center;">
                    <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href=""
                     style="height:46px;v-text-anchor:middle;width:144px" arcsize="7%" strokecolor="#002356"
                    fillcolor="#002356"><w:anchorlock/><center style="color:#FFFFFF;font-family: 'Arial', Helvetica, sans-serif; font-size:15;font-weight:bold;">See more cards</center></v:roundrect><![endif]-->
                    <a class="mb-65" href="#" class="mb-text-cta"
                      style="background-color:#002356;  color: #FFFFFF; border-radius: 4px;display:inline-block;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:43px;text-align:center;text-decoration:none;width:142px; min-width: 142px; -webkit-text-size-adjust:none;mso-hide:all;font-weight:bold;">
                      See more cards
                    </a>
                  </div>
                </td>
              </tr>

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

Besides this, there are some media queries with classes that are mentioned in the code.