title: How to stack columns in responsive email template?
body: <p>I'm trying to have to columns display side by side on large screens and display stacked on top of each other on mobile devices but I've been unable to so far, I tried following the same approach <a href="http://zurb.com/playground/responsive-email-templates" rel="noreferrer">ZURB used on their templates</a> where they added to <code>div</code>s floated and then clearing the float on small devices like:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div class="column" style="float: left; width: 300px;"&gt;
                  &lt;!-- content --&gt;
              &lt;/div&gt;
              &lt;div class="column" style="float: left; width: 300px;"&gt;
                  &lt;!-- content --&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And in my <code>&lt;style&gt;</code> tag:</p>
  
  <pre><code>@media screen and (max-device-width: 600px) {
      .column {
          width: auto !important;
          float: none !important;
          display: block !important;
      }
  }
  </code></pre>
  
  <p>It looks fine almost everywhere but <a href="http://www.campaignmonitor.com/blog/post/3921/outlook.com-drops-margin-and-float-support-entirely" rel="noreferrer">outlook.com apparently strips floats</a> from the css so they don't look side by side there.</p>
  
  <p>Something I tried doing was using table cells instead of <code>div</code>s like:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td width="300" align="left" class="column"&gt;
              &lt;!-- content --&gt;
          &lt;/td&gt;
          &lt;td width="300" align="left" class="column"&gt;
              &lt;!-- content --&gt;
          &lt;/td&gt;
      &lt;tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Keeping the same CSS classes but even though it fixes the issue in desktop clients it looks side by side on iOS devices (as if the <code>display: block</code> isn't getting applied to the <code>td</code>s)</p>
  
  <p>Anyone have an idea?</p>