title: Responsive HTML Email Template Alignment Issue
body: <p>I am using a template I downloaded to create a newsletter for my company. The layout works great and looks great, however, we are required to have an ad. When the display of the email responds to a smaller browser and/or mobile view the ad is aligning atop the first section of content vs. below it. My goal is for the ad to display to the right when viewed on desktop but move below the content when viewed on mobile. </p>
  
  <p>Here is the css I am using:</p>
  
  <pre><code>body {
  width:100%!important;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  margin:0;
  padding:0;
  }
  
    .ExternalClass {
  width: 100%;
    }
  
    span{
      font-family:'Segoe UI', Arial, sans-serif;
      font-size:15px;
      line-height:20px;
      color:#000;
    }
  
  @media only screen and (max-width: 600px) {
  
  table[class="content_wrap"] {
    width: 94%!important;
  }
  
  table[class="full_width"] {
    width: 100%!important;
  }
  
      table[class="hide"], img[class="hide"], td[class="hide"] {
    display: none !important;
  }
  
  td[class="text-center"] {
    text-align: left!important;
  }
  
  
  a[class="button"] {
    border-radius:2px;
    -moz-border-radius:2px;
    -webkitborder-radius:2px;
    background-color:#0F253F;
    color:#fff!important;
    padding: 5px;
    display:block;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0 0 10px 0;
  }
  #logo {max-width:320px;max-height:24px;margin-left:5px;}
  #banner {max-width:100%;}
  .img {display:none;}
  </code></pre>
  
  <p>And here is the section of html I am struggling with:</p>
  
  <pre><code>&lt;!--Content 1--&gt;
            &lt;table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background:#fff;"&gt;
              &lt;tr&gt;
                &lt;td width="4"&gt;&lt;/td&gt;
                &lt;td bgcolor="#fff" width="100%" valign="top"&gt;
                  &lt;table width="100%" cellpadding="15" cellspacing="0" border="0" bgcolor="#fff"&gt;
                    &lt;tr&gt;
                      &lt;td bgcolor="#fff" style="background:#fff;"&gt;
                     &lt;!--AD TABLE--&gt;   
                     &lt;table width="100" cellpadding="0" cellspacing="0" border="0" align="right" class="full_width"&gt;
                          &lt;tr&gt;
                            &lt;td width="100%" class="text-center"&gt;
                              &lt;!--image--&gt;
                              &lt;img style="display: block;" src="http://www.creditunions.com/assets/1/7/advertisement1.gif" border="0" alt="advertisement" width="300" height="20" /&gt; &lt;a href="http://pages.callahan.com/TCU_InvestmentTrends.html"&gt;&lt;img style="display: block;" title="Trust Mutual Funds" src="http://www.creditunions.com/assets/1/7/Trust-Quarterly-anaimated--2.gif" alt="Trust Mutual Funds" width="300" height="250" id="ad" /&gt;&lt;/a&gt;&lt;br/&gt;
                            &lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/table&gt;&lt;!--END AD TABLE--&gt;
                        &lt;!--SPACER TABLE--&gt;
                        &lt;table width="20" cellpadding="0" cellspacing="0" border="0" align="right" class="hide"&gt;
                          &lt;tr&gt;
                            &lt;td width="100%"&gt;&amp;nbsp;
  
                            &lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/table&gt; 
                        &lt;!--END SPACER TABLE--&gt;
                        &lt;table cellpadding="0" cellspacing="0" border="0" class="full_width"&gt;
                          &lt;tr&gt;
                            &lt;td width="100%" class="text-center" style="font-family:'Segoe UI', Arial, sans-serif;font-size:15px;line-height:20px;color:#555;"&gt;&lt;span style="color:#70090A;font-weight:bold;font-size:12px;line-height:22px;"&gt;READ &amp; WATCH&lt;/span&gt;&lt;br /&gt;
                              &lt;a href="http://www.creditunions.com/articles/prepare-for-the-unexpected/" style="font-family: Arial, sans-serif;font-size:18px;line-height:27px;color:#2b6b87;margin:0;font-weight:bold;text-decoration:none;line-height: 22px;"&gt;Prepare For The Unexpected&lt;/a&gt;
                              &lt;br /&gt;&lt;span style="font-size:14px;color: #a4a4a4;"&gt;By Name/span&gt;&lt;br /&gt;&lt;br /&gt;
                              &lt;span&gt;Not long before the financial crisis hit in 2008, Financial Partners Credit Union reduced its subprime consumer loan ratio from 28% to 8%, a decision that  seemed nothing short of prophetic when the economy sailed off a cliff later that year.  But at the time, there was nothing prescient about the decision.  It was simply a natural consequence of the strategic plan the credit union had conceived three years earlier.&lt;br /&gt;&lt;br /&gt; In today&amp;rsquo;s Q&amp;amp;A, CEO Nader Moghaddam breaks down how Financial Partners&amp;rsquo; strategic planning process works and how the credit union prepares for the unknown  using scenario planning.&lt;/span&gt;
                              &lt;br /&gt;&lt;br /&gt;
                              &lt;a href="http://www.creditunions.com/articles/prepare-for-the-unexpected/" class="button" style="color: #2b6b87;font-family: Calibri, 'Segoe UI', Arial, sans-serif;font-size:18px;line-height:22px;"&gt;Read more &amp;raquo;&lt;/a&gt;
                            &lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/table&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;
                &lt;/td&gt;
                &lt;td width="4"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr height="4"&gt;
                &lt;td width="4"&gt;
                  &lt;table width="4" cellpadding="0" cellspacing="0" border="0"&gt;
                    &lt;tr height="1"&gt;
                      &lt;td width="1" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                      &lt;td width="1" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                      &lt;td width="1" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                      &lt;td width="1" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr height="1"&gt;
                      &lt;td width="1" bgcolor="#d9dfe2"&gt;&lt;/td&gt;
                      &lt;td width="3" colspan="3" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr height="1"&gt;
                      &lt;td width="2" colspan="2" bgcolor="#d9dfe2"&gt;&lt;/td&gt; 
                      &lt;td width="2" colspan="2" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr height="1"&gt;
                      &lt;td width="3" colspan="3" bgcolor="#d9dfe2"&gt;&lt;/td&gt;
                      &lt;td width="1" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;
                &lt;/td&gt;
                &lt;td width="100%" bgcolor="#ECF0F5"&gt;&lt;/td&gt;
                &lt;td width="4"&gt;
                  &lt;table width="4" cellpadding="0" cellspacing="0" border="0"&gt;
                    &lt;tr height="1"&gt;
                      &lt;td width="1" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                      &lt;td width="1" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                      &lt;td width="1" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                      &lt;td width="1" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr height="1"&gt;
                      &lt;td width="3" colspan="3" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                      &lt;td width="1" bgcolor="#d9dfe2"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr height="1"&gt;
                      &lt;td width="2" colspan="2" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                      &lt;td width="2" colspan="2" bgcolor="#d9dfe2"&gt;&lt;/td&gt; 
                    &lt;/tr&gt;
                    &lt;tr height="1"&gt;
                      &lt;td width="1" bgcolor="#acb4b8"&gt;&lt;/td&gt;
                      &lt;td width="3" colspan="3" bgcolor="#d9dfe2"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
            &lt;!--end Content 1--&gt;
  </code></pre>
  
  <p>Again, my goal is to have the ad appear below the "read more" blue button when viewed on moble. </p>