Hi, I've been looking into hybrid emails and building a template but encounted a problem where the template of desktop has two 50% sections with text on left and image on right, however when on mobile I want them to be 100% across the screen but still 50% and struggling to work out how to change it and keep it "hybrid"

Here is my code;

<!--Two Columns-->
            <tr>
                <td align="center" style="padding: 0; background-color: #aa7cbb;" bgcolor="#aa7cbb" height="100%" valign="top" width="100%">
                <!--[if (gte mso 9)|(IE)]>
                <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                <td align="center" valign="top" width="600">
                <![endif]-->
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:640px;">                    
                    <tr>
                        <td align="center" valign="top" style="font-size:0;">
                            <!--[if (gte mso 9)|(IE)]>
                            <table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
                            <tr>
                            <td align="center" valign="top" width="300">
                            <![endif]-->
                            <div style="display:inline-block; max-width:50%; min-width:320px; vertical-align:top; width:100%;">
                                <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:300px;">
                                    <tr>
                                        <td align="left" valign="top" style="padding:20px;font-family: Arial, Helvetica, sans-serif;font-size: 60px;line-height: 60px;color: #ffffff;">

                                            <img src="http://1064296601.n137365.test.prositehosting.co.uk/JN8829/v2/images/divide.jpg" style="width:100%;" />
                                            <br>
                                            Pass with us.

                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <!--[if (gte mso 9)|(IE)]>
                            </td>
                            <td align="center" valign="top" width="300">
                            <![endif]-->
                            <div style="display:inline-block; max-width:50%; min-width:320px; vertical-align:top; width:100%;">
                                <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:320px;">
                                    <tr>
                                        <td align="center" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">

                                            <img src="http://1064296601.n137365.test.prositehosting.co.uk/JN8829/v2/images/hero.jpg"style="width:100%;max-width:320px;display:block;" />

                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <!--[if (gte mso 9)|(IE)]>
                            </td>
                            </tr>
                            </table>
                            <![endif]-->
                        </td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]-->
                </td>
            </tr>
            <!--End of Two Columns-->