Outlook打破响应式模板

Question

我已经构建了一个移动响应式电子邮件，但在Outlook和Hotmail上，它最终会进入其移动形式，而不是它的桌面形式。因此，不是将图像放在文本的右侧，而是将其放在文本下方。

我不确定如何纠正这一点，我们将非常感谢任何建议。

CSS

<style type="text/css">
    /* CLIENT-SPECIFIC STYLES */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; }

    /* RESET STYLES */
    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
    table { border-collapse: collapse !important; }
    body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

    /* iOS BLUE LINKS */
    a[x-apple-data-detectors] {
       color: inherit !important;
       text-decoration: none !important;
       font-size: inherit !important;
       font-family: inherit !important;
       font-weight: inherit !important;
       line-height: inherit !important;
    }



    /* MOBILE STYLES */
    @media screen and (max-width: 600px) {

     .img-max {
       width: 100% !important;
       max-width: 100% !important;
       height: auto !important;
     }

     .img-float {
            display:block;
            float:none;
            margin:0 auto 20px !important;
     }

     .max-width {
       max-width: 100% !important;
     }

     .mobile-wrapper {
       width: 85% !important;
       max-width: 85% !important;
     }

     .mobile-padding {
       padding-left: 5% !important;
       padding-right: 5% !important;
     }


     /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
     .mobile-hide {
        display: none !important;
     }

     .mobile-cell-hide {
         width: 0;
     }

    }

    @media screen and (min-width: 600px) {

  /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
 .mobile-show {
    display: none !important;
 }

}

    /* ANDROID CENTER FIX */
    div[style*="margin: 16px 0;"] { margin: 0 !important; }
    </style>

HTML

 <!--RIGHT ALIGNED IMAGE ARTICLE MODULE--->

                <tbody>

                    <tr>

                        <td bgcolor="#ffffff" align="center" style="padding: 20px 15px 0 15px;" class="section-padding"><!--[if (gte mso 9)|(IE)]>

            <table align="center" border="0" cellspacing="0" cellpadding="0" width="550">

            <tr>

            <td align="center" valign="top" width="550">

            <![endif]-->

                        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 550px;" class="responsive-table">

                            <tbody>

                                <tr>

                                    <td>

                                    <table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:550px;" width="100%">

                                        <tbody>

                                            <tr>

                                                <td><!-- ARTICLE COPY -->

                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                                    <tbody>

                                                        <tr>

                                                            <td align="left" style="padding: 0 0 0 0; font-size: 18px; line-height: 20px; font-family: Helvetica, Arial,  sans-serif, serif; color: #000000; vertical-align:top" class="padding">

                                                            <div style="vertical-align: top">

                                                                <!--[if mso]>

<table border="0" cellpadding="0" cellspacing="0" width="160" align="right" style="width:160px;"><tr><td style="padding:0 0 20px 20px;">

<![endif]--><a href="~PROBE(204)~"><img alt="insert alt text here" class="img-max img-float" align="right" style="display: block; font-family: sans-serif; font-size: 16px; color: #999999; vertical-align: top; Margin:0 0 10px 10px;" width="250px" src="http://hearst.emsecure.net/images/HouseBeautiful/spread1.jpg" /></a> <!--[if mso]>

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

<![endif]-->

                                                            </div>

                                                            Dear ~FORENAME~,<br />

                                                            <br />

                                                            Every issue of <i>House Beautiful</i> is packed with the latest trends and stylish inspiration, featuring practical advice for your home and garden.<br />

                                                            <br />

                                                            To celebrate the bank holiday, we're offering you the chance to try six issues for <b>JUST &pound;6</b> and every month you'll be inspired by reader homes, beautiful buys and easy makeover ideas.<br />

                                                            &nbsp;</td>

                                                        </tr>

                                                    </tbody>

                                                </table>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td align="center"></td>

                                            </tr>

                                        </tbody>

                                    </table>

                                    </td>

                                </tr>

                            </tbody>

                        </table>

                        <!--[if (gte mso 9)|(IE)]>

            </td>

            </tr>

            </table>

            <![endif]--></td>

                    </tr>

                    <!--END OF RIGHT ALIGNED IMAGE ARTICLE MODULE--->