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

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 顺序搞砸了一切。我删除了媒体查询中的所有样式并重新组织它，它就像一个魅力！