I was a little startled to find the 4 and 5 versions of the iPhone are not handling this code at all - neither image is displaying. Works great in 5s and many other mobile clients. Am I missing something obvious here?

@media only screen and (max-width: 640px) {
*[class=hide_on_mobile] { display: none !important;}
*[class=show_on_mobile] { display : block !important;width : auto !important;max-height: inherit !important;overflow : visible !important;float : none !important; }
}

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class="hide_on_mobile">
        <a href="#"><img width="640" height="150" border="0" src="large-banner.jpg" alt="Banner Text" style="display:block;" /></a>
        </td>
        <!--[if !mso]><!-->
        <td class="show_on_mobile" style="width:0;max-height:0;overflow:hidden;float:left;display:none;">
        <a href="#"><img width="100%" border="0" src="small-banner.jpg" alt="Banner Text" style="display:block;" /></a>
        </td>
        <!--<![endif]-->
    </tr>
</table>

Any insights would be appreciated :-)