<style>
	/* Layout Shifter Layout Pattern CSS */
	@media only screen and (max-width: 500px) {
	    table[class="pattern"] td{
	        width: 100%;
            display: block;
	        -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
	    }
	}
</style>

</head>

<table cellpadding="0" cellspacing="0" class="pattern">
    <tr>
        <td width="200" align="left" valign="top" style="padding: 20px; background: #999; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #fff;">
            <h1>Column 1</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
            </p>
        </td>
        <td width="400" valign="top">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td width="400" align="left" valign="top" style="padding: 20px; background: #666; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #fff;">
                        <h2>Column 2</h2>
                        <p>
                            Nunc tempus felis vitae urna. Vivamus porttitor, neque at volutpat rutrum, purus nisi eleifend libero, a tempus libero lectus feugiat felis. Morbi diam mauris, viverra in, gravida eu, mattis in, ante. Morbi eget arcu. Morbi porta, libero id ullamcorper nonummy, nibh ligula pulvinar metus, eget consectetuer augue nisi quis lacus. Ut ac mi quis lacus mollis aliquam. Curabitur iaculis tempus eros. Curabitur vel mi sit amet magna malesuada ultrices. Ut nisi erat, fermentum vel, congue id, euismod in, elit. Fusce ultricies, orci ac feugiat suscipit, leo massa sodales velit, et scelerisque mi tortor at ipsum. Proin orci odio, commodo ac, gravida non, tristique vel, tellus. Pellentesque nibh libero, ultricies eu, sagittis non, mollis sed, justo. Praesent metus ipsum, pulvinar pulvinar, porta id, fringilla at, est.
                        </p>
                    </td>
                </tr>
                <tr>
                    <td width="400" align="left" valign="top" style="padding: 20px; background: #333; color: #fff; font-family: arial,sans-serif; font-size: 14px;">
                        <h2>Column 3</h2>
                        <p>
                            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>