title: Table Stacking and Resizing with HTML and CSS
body: <p>I am trying to build a fairly simple email using HTML and CSS where it can either by 300px wide or 600px wide depending on the following @media:</p>
  
  <pre><code>@media only screen and (max-width: 599px) { /* Mobiles etc */ }
  @media only screen and (min-width: 600px) { /* Tablets or Desktops etc */ }
  </code></pre>
  
  <p>I then have a table with two tables within it, which stack as soon as I resize the browser to less than 600px, which is fine.  I have done this by:</p>
  
  <pre><code>  @media only screen and (max-width: 599px) {  
    .floatLeftResponse{
      width:100% !important;
      float:left;
    }
  </code></pre>
  
  <p>However, I can't seem to get everything working properly because my entire email is either made up of one table 600px wide or the same with two 50% tables within it.  In some scenarios I want the right side to go on top of the left and vice versa.</p>
  
  <p>Then we have the images which are 600px wide, which should also scale down to 300px wide.</p>
  
  <p>Since I am fairly new to all this I have been doing a lot of Googling, and every time I get one part working I somehow manage to break the other parts.  Any help would be appreciated guys :) </p>