html - 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; }
}

还应该工作:它在 litmus 中崩溃的客户端/浏览器是什么？