Hi! I'm new to the world of email design and dealing with some issues as far as SHOWING content solely on mobile. I implemented this solution and its texts out with the image showing. Example code below.

    div[class=mobileShow] {
        display: block !important;
        max-height: none !important;
    }
    table[class=mobileShow] {
        display: table !important;
        max-height: none !important;
    }
    a[class=mobileShow] {
        display: inline !important;
        max-height: none !important;
    }

    img[class=mobileShow],
    tr[class=mobileShow]
    td[class=mobileShow] {
        display: block !important;
        max-height: none !important;
    }

    table[id=heroMobile] img {
        display: block !important;
        height:auto !important;
        width:100% !important;
    }

    <table class="mobileHide" id="heroDesktop" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
    <tr>
        <td style="text-transform: none;">
            <a href="cta" target="_blank">
                <img src="image" width="600" height="419" border="0" style="color: #d46128; font-family: Arial, sans-serif; font-size: 14px;" alt="alt »" />
            </a>
        </td>
    </tr>
    </table><!-- /#heroDesktop -->
    <div class="mobileShow">
        <table class="mobileShow" id="heroMobile" border="0" cellspacing="0" cellpadding="0" align="center">
            <tr>
                <td style="text-transform: none;">
                    <a class="mobileShow" href="cta" target="_blank">
                        <img class="mobileShow" src="image" width="320" height="226" border="0" style="color: #d46128; font-family: Arial, sans-serif; font-size: 14px;" alt="alt »" />
                    </a>
             </td>
            </tr>
        </table><!-- /#heroMobile -->
    </div>