2帶有側邊欄的列響應式佈局

Question

我正在嘗試創建一個2列布局，當它達到移動大小時，該佈局下降到1。

我使用的是響應模式模板，但是，當我將它放入石蕊中以測試側欄時，它只是縮小而不是實際下降到主要內容之下。

任何幫助，非常感謝。謝謝！

/* Column Drop Layout Pattern CSS */ 
 

 
@media only screen and (max-width: 460px) { 
 
    td[class="pattern"] .col { 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
    td[class="pattern"] .col:first-child { 
 
    margin-bottom: 20px; 
 
    } 
 
}

<table cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td class="pattern"> 
 
     <table cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
      <td class="col" width="400" align="left" valign="top"> 
 
      <table cellpadding="0" cellspacing="0"> 
 
       <tr> 
 
       <td align="left" valign="top" style="font-family: arial,sans-serif; font-size: 14px; color: #333; padding-right: 20px;"> 
 
        <h1 style="margin-top: 0;">Main Column</h1> 
 
        <p style="padding-bottom: 10px; line-height: 20px !important;"> 
 
        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> 
 
        <img src="http://placehold.it/140x50/333&text=CTA»" alt="" style="display: block; border: 0;" /> 
 
       </td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
      <td class="col" width="200" align="left" valign="top" style="background: #ebebeb;"> 
 
      <table cellpadding="0" cellspacing="0"> 
 
       <tr> 
 
       <td align="left" valign="top" style="padding: 20px;"> 
 
        <table cellpadding="0" cellspacing="0"> 
 
        <tr> 
 
         <td colspan="2" align="left" style="font-family: arial,sans-serif; font-size: 22px; font-weight: bold; color: #666; padding-bottom: 10px;">Sidebar</td> 
 
        </tr> 
 
        <tr> 
 
         <td width="14" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td> 
 
         <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 1</td> 
 
        </tr> 
 
        <tr> 
 
         <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td> 
 
         <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 2</td> 
 
        </tr> 
 
        <tr> 
 
         <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td> 
 
         <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 3</td> 
 
        </tr> 
 
        <tr> 
 
         <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td> 
 
         <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 4</td> 
 
        </tr> 
 
        <tr> 
 
         <td width="20" align="left" style="font-family: arial,sans-serif; font-size: 20px; color: #666;">&bull;</td> 
 
         <td align="left" style="font-family: arial,sans-serif; font-size: 14px; color: #666;">Bullet 5</td> 
 
        </tr> 
 
        </table> 
 
       </td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

@media only screen and (max-width: 460px) { 
    td.pattern .col { 
     display: block; 
     width: 100%; 
    } 
    td.pattern .col:first-child { margin-bottom: 20px; } 
} 

應該工作，也：它會崩潰的石蕊什麼客戶端/瀏覽器？

Answer 2

您正在使用的表結構和左，右手塊包裹withing td元素所以它實際上不可能顯示td下另一td元素。

這意味着你要改變你的HTML和它要麼與股利或其他元素