Hi, I am trying to create a responsive email with 2 columns, following the table structure advised by the Litmus Modern HTML book I bought.

At full width the design looks abit like a 4 paned window, so there is an image top left, a paragraph top right, then a paragraph bottom left, and another image bottom right.

When hitting ther 600px break point, they all stack on top of eachother as they should.

This looks fine in the Chrome browser, but as usual looks like a pig in Outlook.

If someone could take a look at my code and offer some assistance on how to get the columns to stack properly in Outlook, that would be really appreciated.

It is the Mid Section where I am having the issue


<!doctype html>
<html>
    <head>
        <meta name ="viewport" content="width=device-width, initial-scale=1"> 
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta charset="utf-8">

        <style type="text/css">

            body { 
                padding: 0;
                margin: 0;
                font-family: sans-serif;
            }

            @media screen and (max-width: 600PX) {

                .responsive-table {
                    width: 100% !important;
                    padding: 10px 5%; 
                }

                .responsive-table2 {
                    width: 100% !important;
                }

                .responsive-image {
                    width: 100% !important;
                }

            }

        </style>
    </head>
    <body>


        <!-- FULL WIDTH CONTAINER --> 
        <table width="100%" cellspacing="0" cellpadding="0" border="0px">
            <tr>
                <td align="center">

                    <!-- 600px CONTAINER --> 
                    <table width="600px" cellspacing="0" cellpadding="0" border="0px" class="responsive-table">
                        <tr>
                            <td bgcolor="gold" align="center" style="font-size: 50px; padding: 20px;">
                                HEADER
                            </td>
                        </tr>
                        <tr>
                            <td bgcolor="yellow" align="center" style="font-size: 20px; padding: 5px;">
                                NAV BAR
                             </td>
                        </tr>
                        <tr>
                            <td bgcolor="lightblue" align="center" style="font-size: 50px; padding: 20px;">
                                HEADLINE
                             </td>
                        </tr>
                        <tr>
                            <td>

                                <!-- Image 1 -->
                                <table width="300px" height="450px" align="left" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
                                    <tr>
                                        <td>
                                            <img src="http://cdn.proco.com/public/images/proco/6.jpg" width="300" height="450" class="responsive-image" style="vertical-align: middle;"/>
                                        </td>
                                    </tr>
                                </table>

                               <!-- Text 1 -->
                               <table width="300px" height="450px" align="right" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
                                    <tr>
                                        <td bgcolor="#111" style="padding: 15px; color: white;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
                                    </tr>
                                </table>

                                <!-- Image 2 -->
                                <table width="300px" height="450px" align="right" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
                                    <tr>
                                        <td>
                                            <img src="http://cdn.proco.com/public/images/proco/6.jpg" width="300" height="450" class="responsive-image" style="vertical-align: middle;"/>
                                        </td>
                                    </tr>
                                </table>

                                <!-- Text 2 -->
                               <table width="300px" height="450px" align="left" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
                                    <tr>
                                        <td bgcolor="#111" style="padding: 15px; color: white;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
                                    </tr>
                                </table>    



                            </td>
                         </tr>
                        <tr>
                            <td bgcolor="gold" align="center" style="font-size: 50px; padding: 20px;">
                                FOOTER
                             </td>
                         </tr>


                    </table>

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


    </body>
</html>