Hi - I am having a problem with my 2 column templates on Android. The columns that are supposed to stack are not stacking and are instead showing up on top of one another. What can I do to fix this? It works great in most other platforms.

My code is below.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="x-apple-disable-message-reformatting" />
    <title></title>
    <style>
        body {
            margin:0;
            padding:0;
        }
        table, td {
            border-collapse: collapse;
            margin:0;
            padding:0;
        }
        table {
            mso-table-lspace:0pt;
            mso-table-rspace:0pt;
        }
        img {
            display:block;
            border:0 none;
            outline:none;
            text-decoration:none;
            line-height: 100%;
        }
        .info {
            font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 125%;
            margin:10px 0 0 0;
        }
        a {
            text-decoration: underline solid #E22237;
            -webkit-text-decoration-color: #E22237;
            color: #292929;
        }
        h1 {
            font-family: Georgia, Times, 'Times New Roman', serif;
            font-size: 36px;
            font-weight: normal;
            color:#292929;
            margin:0;
            line-height: 125%;
        }
        h2 {
            font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
            font-size: 19px;
            font-weight: normal;
            color: #757575;
            margin:0;
            line-height: 125%;
        }
        h3 {
            font-family: Georgia, Times, 'Times New Roman', serif;
            font-size: 25px;
            font-weight: normal;
            color:#292929;
            margin:0;
            line-height: 125%;
        }
        p {
            font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
            font-size: 16px;
            line-height: 125%;
            margin:10px 0 0 0;
        }
        #wrapper {
            margin:0 auto;
            max-width: 600px;
            display:block;
            background-color: #ffffff;
        }
        .caption {
            font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
            font-size: 10px;
            color:#757575;
            text-align: right;
            margin:0;
        }
        .date {
            font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
            font-size: 14px;
            color: #565656;
        }
        .billing {
            font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
            font-size:16px;
        }
        .footer {
            font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
            font-size:11px;
            color:#292929;
        }
        a.button {
            font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
            font-size:16px;
            text-decoration: none;
            color:#FFFFFF;
            margin:0 0 20px 0px;
            display:block;
            border:12px solid #E22237;
            background-color:#E22237;
            border-radius:0px;
            width:100px;
        }
        a.buttonSmall {
            font-family:Arial, Verdana, Geneva, Helvetica, sans-serif;
            font-size:14px;
            text-decoration: none;
            color:#ffffff;
            margin:0 0 20px 0px;
            display:block;
            border:5px solid #E22237;
            background-color:#E22237;
            border-radius:0px;
            width:80px;
        }
        .credits {
            font-family:Arial, Verdana, Geneva, Helvetica, sans-serif;
            font-size: 10px;
            color:#565656;
        }
        .hero {
            box-sizing: border-box;
            display:block;
        }
        .eventColumn {
            width:48%;  
            display:inline-block;
            vertical-align: top;
        }
        .eventColumn:nth-child(odd){    
            padding:0 15px 0 0;
        }
        .eventColumn:nth-child(even){
            padding:0 0 0 0px;
        }

        @media only screen and (max-width:440px) {
            #wrapper {
                display:block;
                max-width: 440px;
                width:440px;
            }
            .resImage {
                height:auto;
                width:100%;
                display: block;
            }
            .resHeroImage {
                height:auto;
                width:100%;
                display: block;
                text-align: center;
            }
            .resEventImage {
                height:auto;
                width:100% !important;
                display: block;
                text-align: center;
            }
            .eventColumn {
            width:100% !important;  
            display:block;
            }
            .hr {
                display:none;
            }
            .footer {
                padding-left: 40px !important;
                padding-right: 40px !important;
        }
        p {
                font-size: 16px !important;
            }
        }
        @media only screen and (max-width:599px) {
            #wrapper {
                display:block;
                max-width: 599px;
                width:100%;
            }
            .resHeroImage {
                height:auto;
                width:100%;
                display: block;
                text-align: center;
            }
            .resEventImage {
                height:auto;
                width:100% !important;
                display: block;
                text-align: center;
            }
            .eventColumn {
            width:100% !important;  
            display:block;
            }
            .hr {
                display:none;
            }
            .footer {
                padding-left: 40px !important;
                padding-right: 40px !important;
        }
        p {
                font-size: 16px !important;
            }
        }
</style>
</head>
<body>
    <!-- START background color table -->
    <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#F0F0F0">
        <tr>
            <td align="center" width="100%">
                <!-- START wrapper table -->
<!--[if (gte mso 9)|(IE)]><table width="600" align="center"><tr><td align="center"><![endif]--> 
                <table id="wrapper" cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                    <tr>
                        <td align="left" width="100%">
                         <!-- START logo table -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                                <tr>
                                    <td style="padding:10px 15px 0 20px;" align="left" width="51%"> 
                                        &nbsp;
                                    </td>
                                    <td style="padding:10px 20px 0 0;" align="right" width="40%"> 
                                        &nbsp;
                                    </td>
                                </tr>
                            </table>
                            <!-- END logo table -->
                            <!-- START hero table -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                                <tr>
                                    <td style="padding:0 15px 0 15px;" align="center" width="100%"> 
                                        <h1>Header (max 30 characters)</h1>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding:0 15px 4px 15px;" align="center" width="100%"> 
                                        <h2>Subheader (max 40 characters)</h2>
                                    </td>
                                </tr>
                                <tr>    
                                    <td style="padding:0 15px 0 15px;" align="center" width="100%">
                                        <img class="resHeroImage" src="http://www.carnegiehall.org/uploadedImages/Images/Email/Placeholder_Images/placeholder_image_570x300.jpg" width="570" align="left" alt="Placeholder Image">
                                    </td>
                                </tr>
                                <tr>    
                                    <td style="padding:0 15px 0 20px;" class="caption" align="right" width="100%">
                                        <span>Caption</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding:0 40px 40px 40px;" align="left" width="100%">
                                        <p>Body Copy. <a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin nunc nibh, nec dignissim dolor tempor sit amet. Cum sociis natoque penatibus et magnis dis.</p>
                                    </td>
                                </tr>
                            </table>
                            <!-- END hero table -->
                            <!-- START 2-event table -->
<!--[if (gte mso 9)|(IE)]><table width="600" align="center"><tr><td align="center" width="50%"><![endif]--> 
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                                <tr>
                                    <td align="left" width="100%"> 
                                        <!-- START left event -->
                                        <div class="eventColumn">
                                        <table cellpadding="0" cellspacing="0" border="0"  align="left" width="100%">
                                            <tr>
                                                <td style="padding:0 10px 0 15px;" align="left" width="100%"> 
                                                    <img class="resEventImage" src="http://www.carnegiehall.org/uploadedImages/Images/Email/Placeholder_Images/placeholder_image_300x225.jpg" alt="" width="270" align="center">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:0 10px 0 20px;" class="caption" align="right" width="100%">
                                                    Caption
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 15px;" class="date" align="left" width="100%">
                                                    Date/Time<br/>
                                                    Venue
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 15px;" align="left" width="100%">
                                                    <h3><a href="#">Title</a></h3>
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 15px;" class="billing" align="left" width="100%">
                                                    Billing
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 10px 15px;" align="left" width="100%">
                                                    <p>
                                                    Event Copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin nunc nibh, nec dignissim dolor tempor sit amet. Cum sociis natoque penatibus et magnis dis.</p><br/>
                                                    <a class="buttonSmall" href="#">Get&nbsp;Tickets</a>
                                                </td>
                                            </tr>
                                        </table>
                                        </div>
                                        <!-- END left event -->
                                        <!--[if (gte mso 9)|(IE)]>
                                           </td><td width="50%" align="center">
                                        <![endif]-->
                                        <!-- START right event -->
                                        <div class="eventColumn">
                                        <table cellpadding="0" cellspacing="0" border="0"  align="right" width="100%">
                                            <tr>
                                                <td style="padding:0 15px 0 10px;" align="right" width="100%"> 
                                                    <img class="resEventImage" src="http://www.carnegiehall.org/uploadedImages/Images/Email/Placeholder_Images/placeholder_image_300x225.jpg" alt="" width="270" align="center">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:0 15px 0 20px;" class="caption" align="right" width="100%">
                                                    Caption
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 10px;" class="date" align="left" width="100%">
                                                    Date/Time<br/>
                                                    Venue
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 10px;" align="left" width="100%">
                                                    <h3><a href="#">Title</a></h3>
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 10px;" class="billing" align="left" width="100%">
                                                    Billing
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 10px 10px;" align="left" width="100%">
                                                    <p>
                                                    Event Copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin nunc nibh, nec dignissim dolor tempor sit amet. Cum sociis natoque penatibus et magnis dis.</p><br/>
                                                    <a class="buttonSmall" href="#">Get&nbsp;Tickets</a>
                                                </td>
                                            </tr>
                                        </table>
                                        </div>
                                        <!-- END right event -->
                                    </td>
                                </tr>
                            </table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->                            
                            <!-- END 2-event table -->
                            <!-- START horizontal rule -->
                            <table class="hr" cellspacing="0" cellpadding="0" border="0" width="100%" align="center">
                                <tr>
                                    <td style="padding:10px 15px 10px 15px;" align="center" width="100%">
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                                            <tr>
                                                <td style="background:none; border-top: solid 1px #E0E0E0; height:1px; width:100%; margin: 0; padding-top: 10px; padding-bottom:0px; padding-right: 10px; padding-left: 10px;" align="center" width="100%">&nbsp; 

                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <!-- END horizontal rule -->
                                    <!-- START 2-event table -->
<!--[if (gte mso 9)|(IE)]><table width="600" align="center"><tr><td align="center"><![endif]-->                                     
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                                <tr>
                                    <td align="left" width="100%"> 
                                        <!-- START left event -->
                                        <div class="eventColumn">
                                        <table cellpadding="0" cellspacing="0" border="0"  align="left" width="100%">
                                            <tr>
                                                <td style="padding:0 10px 0 15px;" align="left" width="100%"> 
                                                    <img class="resEventImage" src="http://www.carnegiehall.org/uploadedImages/Images/Email/Placeholder_Images/placeholder_image_300x225.jpg" alt="" width="270" align="center">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:0 10px 0 20px;" class="caption" align="right" width="100%">
                                                    Caption
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 15px;" class="date" align="left" width="100%">
                                                    Date/Time<br/>
                                                    Venue
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 15px;" align="left" width="100%">
                                                    <h3><a href="#">Title</a></h3>
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 15px;" class="billing" align="left" width="100%">
                                                    Billing
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 10px 15px;" align="left" width="100%">
                                                    <p>
                                                    Event Copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin nunc nibh, nec dignissim dolor tempor sit amet. Cum sociis natoque penatibus et magnis dis.</p><br/>
                                                    <a class="buttonSmall" href="#">Get&nbsp;Tickets</a>
                                                </td>
                                            </tr>
                                        </table>
                                        </div>
                                        <!-- END left event -->
                                        <!--[if (gte mso 9)|(IE)]>
                                           </td><td width="50%" align="center">
                                        <![endif]-->
                                        <!-- START right event -->
                                        <div class="eventColumn">
                                        <table cellpadding="0" cellspacing="0" border="0"  align="right" width="100%">
                                            <tr>
                                                <td style="padding:0 15px 0 10px;" align="right" width="100%"> 
                                                    <img class="resEventImage" src="http://www.carnegiehall.org/uploadedImages/Images/Email/Placeholder_Images/placeholder_image_300x225.jpg" alt="" width="270" align="center">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding:0 15px 0 20px;" class="caption" align="right" width="100%">
                                                    Caption
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 10px;" class="date" align="left" width="100%">
                                                    Date/Time<br/>
                                                    Venue
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 10px;" align="left" width="100%">
                                                    <h3><a href="#">Title</a></h3>
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 0 10px;" class="billing" align="left" width="100%">
                                                    Billing
                                                </td>
                                            </tr>   
                                            <tr>
                                                <td style="padding:0 10px 10px 10px;" align="left" width="100%">
                                                    <p>
                                                    Event Copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin nunc nibh, nec dignissim dolor tempor sit amet. Cum sociis natoque penatibus et magnis dis.</p><br/>
                                                    <a class="buttonSmall" href="#">Get&nbsp;Tickets</a>
                                                </td>
                                            </tr>
                                        </table>
                                        </div>
                                        <!-- END right event -->
                                    </td>
                                </tr>
                            </table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->                            
                            <!-- END 2-event table -->
                            <!-- START credits -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                                <tr>
                                    <td style="padding:10px 10px 20px 20px;" class="credits" align="left" width="100%"> 
                                        <span>Credits</span>
                                    </td>
                                </tr>
                            </table>
                            <!-- END credits -->
                            <!-- START FOOTER horizontal rule -->
                            <table cellspacing="0" cellpadding="0" border="0" width="100%" align="center">
                                <tr>
                                    <td style="padding:10px 15px 0px 15px;" align="center" width="100%">
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
                                            <tr>
                                            <td style="background:none; border-top: solid 2px #292929; height:1px; width:100%; margin: 0; padding-top: 10px; padding-bottom:0px; padding-right: 10px; padding-left: 10px;" align="center" width="100%">&nbsp; 

                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <!-- END FOOTER horizontal rule -->
                            <!-- START footer -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">  

                                <tr>
                                    <td class="footer" style="padding:10px 0px 20px 100px;" align="left" width="100%">
                                        View in Browser | Unsubscribe | Manage&nbsp;Your&nbsp;Preferences | Contact Us
                                    </td>
                                </tr>
                                <tr>
                                    <td class="footer" style="padding:0px 100px 0 100px;" align="left" width="100%">
                                        Photography by XXX.<br/><br/>

                                    </td>
                                </tr>


                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                            </table>
                                <!-- END footer table -->
                        </td>
                    </tr>
                </table>
                <!-- END wrapper table -->
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->                
            </td>
        </tr>
    </table>
    <!-- END background color table -->
</body>
</html>