3 block responsive template

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>How do I get my responsive email to work in Gmail?</title>

    <style>

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

            .all {

                width: 355px !important;

            }

            .no-mobile {

                text-indent: -99999em !important;

                display: none !important;

            }

            .mobile-only {

                text-indent: 0 !important;

                display: block !important;

                height: auto !important;

                visibility: visible !important;

                overflow: visible !important;

                max-height: none !important;

            }

        }

    </style>

</head>

<body>

    <div class="no-mobile" style="background:orange;"><table width="600" border="1" cellpadding="0" cellspacing="0" align="center">

        <tr>

            <td colspan="3">

        <img src="https://via.placeholder.com/600x200" alt="Banner Image" style="display: block; width: 100%; height: auto;">

            </td>

        </tr>

        <tr>

            <td colspan="3">

                &nbsp;

            </td>

        </tr>

        <tr>

            <td width="33%" align="center"><h2>Heading</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique massa eu orci hendrerit, eget varius justo interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

                        <p>Nunc malesuada, magna nec euismod varius, velit risus maximus libero, nec consequat arcu sem a ex. Duis sit amet ullamcorper nibh. Nulla facilisi. Integer eu lectus sit amet augue hendrerit facilisis.</p>

                        <p>Quisque euismod ex sit amet neque iaculis, at vehicula velit consequat. Sed id elit ac nibh mollis hendrerit.</p></td>

            <td width="33%" align="center"><h2>Heading2</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique massa eu orci hendrerit, eget varius justo interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

                        <p>Nunc malesuada, magna nec euismod varius, velit risus maximus libero, nec consequat arcu sem a ex. Duis sit amet ullamcorper nibh. Nulla facilisi. Integer eu lectus sit amet augue hendrerit facilisis.</p>

                        <p>Quisque euismod ex sit amet neque iaculis, at vehicula velit consequat. Sed id elit ac nibh mollis hendrerit.</p></td>

           <td width="34%" align="center"><h2>Heading3</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique massa eu orci hendrerit, eget varius justo interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

                        <p>Nunc malesuada, magna nec euismod varius, velit risus maximus libero, nec consequat arcu sem a ex. Duis sit amet ullamcorper nibh. Nulla facilisi. Integer eu lectus sit amet augue hendrerit facilisis.</p>

                        <p>Quisque euismod ex sit amet neque iaculis, at vehicula velit consequat. Sed id elit ac nibh mollis hendrerit.</p></td>

        </tr>

        </table></div>

    <div class="mobile-only" style="background:purple; display:none">

        <!--[if !mso]>-->

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

        <tr>

            <td>

        <img src="https://via.placeholder.com/300x200" alt="Banner Image" style="display: block; width: 100%; height: auto;">

            </td>

        </tr>

        <tr>

            <td>

                &nbsp;

            </td>

        </tr>

        <tr>

            <td align="center"><h2>Heading</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique massa eu orci hendrerit, eget varius justo interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

                        <p>Nunc malesuada, magna nec euismod varius, velit risus maximus libero, nec consequat arcu sem a ex. Duis sit amet ullamcorper nibh. Nulla facilisi. Integer eu lectus sit amet augue hendrerit facilisis.</p>

                        <p>Quisque euismod ex sit amet neque iaculis, at vehicula velit consequat. Sed id elit ac nibh mollis hendrerit.</p></td>

        </tr>

        <tr>

            <td align="center"><h2>Heading2</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique massa eu orci hendrerit, eget varius justo interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

                        <p>Nunc malesuada, magna nec euismod varius, velit risus maximus libero, nec consequat arcu sem a ex. Duis sit amet ullamcorper nibh. Nulla facilisi. Integer eu lectus sit amet augue hendrerit facilisis.</p>

                        <p>Quisque euismod ex sit amet neque iaculis, at vehicula velit consequat. Sed id elit ac nibh mollis hendrerit.</p></td>

        </tr>

        <tr>

            <td align="center"><h2>Heading3</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique massa eu orci hendrerit, eget varius justo interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

                        <p>Nunc malesuada, magna nec euismod varius, velit risus maximus libero, nec consequat arcu sem a ex. Duis sit amet ullamcorper nibh. Nulla facilisi. Integer eu lectus sit amet augue hendrerit facilisis.</p>

                        <p>Quisque euismod ex sit amet neque iaculis, at vehicula velit consequat. Sed id elit ac nibh mollis hendrerit.</p></td>

        </tr>

        </table>

        <!--<![endif]-->

    </div>

</body>

</html>