I'm working on a responsive email. I'm hiding a section on the desktop version by using Style="display: none" and want to show this section only for the mobile phone. I have showMobile class to show the section for mobile. It's rendering fine for most of the email clients except Gmail and Outlook 2013. In Gmail and Outlook 2013 it's displaying the hidden section also. Below is my code.

<style>
   /*IPHONE STYLES*/
   @media only screen and (max-width: 480px) {

   table[class=devicewidth] {width: 280px!important;text-align:left!important;}
   table[class="showMobile"]{display: table !important;}
   }
</style>


<table width="100%" bgcolor="#ffffff" style="display:none;" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" class="showMobile">
   <tbody>
      <tr>
         <td>
              <table bgcolor="#f7dc34" width="600" border="0" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidth">
                <tbody>
                  <tr>
                      <td width="100" class="side-padding"></td>
                      <td width="400" style="font-family: arial, sans-serif; font-size: 10px;color: #cccaca; line-height: 11px;" class="footer-mobile">

                            Some text here
                       </td>
                       <td width="100" class="side-padding"></td>
                  </tr>
                </tbody>
             </table>
         </td>
      </tr>
   </tbody>
</table>