css - 媒体查询不是在移动设备上堆叠列，而是应用其他样式？

Question

我的媒体查询有点问题(我刚开始使用这些，这是呈现响应式 html 电子邮件的“最安全”方式)。

我的媒体查询:

@media only screen and (max-width: 600px){
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.submitBtn {
margin: auto !important;
float: none !important;
}
td, h3, h4, .branding, .paragraph, .container {
display: block !important;
width: 100% !important;
float: none !important;
height: auto !important;
margin: auto !important;
padding: 0 !important;
text-align: center !important;
}
td {
padding-right: 5px !important;
padding-left: 5px !important;
padding-top: 10px !important;
padding-bottom: 15px !important;
}
td.branding, img.branding {
display: block !important;
text-align: center !important;
margin: 0 auto !important;
}
.branding {
padding-bottom: 10px !important;
}
.toggle {
text-align: left;
}
table.center {
text-align: center !important;
}
.display-none {
display: none !important;
}
.checkbox {
  display: block !important;
  margin: auto !important;
  max-width: 100% !important;
  float: none !important;
}
}

请注意，我的头部确实有设备宽度的元数据。所有其他样式都在渲染，除了我有两个 td 的地方，它们没有堆叠在移动设备上。

在 chrome 中，使用检查器并将其设置为响应式，它显示它们应该在移动设备上堆叠，但当我自己实际测试时它们不是。

我应该堆叠的第一个模块(我放置占位符以删除敏感数据)

<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center">
    <tr>
       <td class="branding logo" width="315" align="left">Stacking image goes here
       </td>
        <td class="branding" width="315" align="right"><span class="lighter">Text & More</span> <span class="normal">Stacking text goes here</span>
        </td>
    </tr>
</table>

我应该堆叠的其他部分:

<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center">
                            <tr>
                              <td class="description" align="left" width="75%">
                                <h4 class="indent padding-t"><span class="normal middle"></span></h4>
                                <p class="paragraph indent">Y
                                </p>
                              </td>
                              <td class="checkbox">
                                <input type="checkbox" id="checkbox" name="" onclick="changeValue()" value="">
                                <label class="toggle" for="checkbox"></label>
                                <input type="hidden" id="hidden" name="" checked value="">
                              </td>
                            </tr>
                          </table>

预先感谢您的帮助，如果这是一个“菜鸟”错误，我深表歉意，因为我几乎可以肯定它是!

Answer 1

事实证明，我的 CSS 顺序把一切都搞砸了。我删除了媒体查询中的所有样式并重新组织它，效果非常好!