Email template: 3 to 2 Column

How to go from three even columns to two with the third on the next line.

by Wally Glenn

HTML

This does not display correctly in JSFiddle, however it works fine in email.

If you test this in an web browser with a window wider than 600px, you will see a table with three columns, each 33% width.

Below 600px, the first two columns expand to 50% width and column 3 expands to 100% width and that forces the column to the next line.

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: 0 auto;" class="email-container">
  <tr>
    <!-- Column : BEGIN -->
    <td width="33.33%" class="stack-column-center-50">
      <table role="presentation" cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td style="padding: 10px; text-align: center">
            <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
          </td>
        </tr>
        <tr>
          <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
            <p style="margin: 0;"><strong>Column 1</strong><br />Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
          </td>
        </tr>
      </table>
    </td>
    <!-- Column : END -->
    <!-- Column : BEGIN -->
    <td width="33.33%" class="stack-column-center-50">
      <table role="presentation" cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td style="padding: 10px; text-align: center">
            <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
          </td>
        </tr>
        <tr>
      ...

CSS

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

		.email-container {
			width: 100% !important;
			margin: auto !important;
		}
    .stack-column-center {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        direction: ltr !important;
        float: left !important;
    }
    .stack-column-center-50 {
        width: 50% !important;
        max-width: 50% !important;
        direction: ltr !important;
        display: inline-block;
    }
 	}