CSS大屏幕媒体查询覆盖小屏幕媒体查询

我正在使我的新开发网站移动响应的过程中，但我注意到一些奇怪的行为，这让我有点疯狂。希望有人能指出我做错了什么。当我在一个小的分辨率下进行测试时，比如说320px宽度，来自720px宽度的规则也被应用，因为它们在级联中处于较低的位置，所以优先考虑。我每次都会用一个！关于小尺寸查询的重要声明，但我知道这不可能是正确的

我的实际CSS太大，无法包含，但下面是我看到的示例。如果我在大型平板电脑/小型桌面上有两个并排的div，但希望它们是全宽的，并且在手机上一个在另一个之上：

@media screen and (max-width:479px){
     div{width:100%}
}
@media screen and (max-width:1159px) and (min-width:980px){
     div{width:49%;float:left}
     div:first-child{margin-right:2%}
}

---

当我签入320px到479px宽度时，980-1159的规则已加载，我必须使用！重要声明，并将float设置为none，margin设置为0。为什么会发生这种情况？我做错了什么吗？

我认为这一切都是因为事情的顺序不对：

而不是：

@media screen and (max-width:1159px) and (min-width:980px){

我把它改成：

@media screen and (min-width:980px) and (max-width:1159px){

它似乎工作得很好。调整结果方块的大小，以查看这是否是您要查找的内容：

---

由于某些原因，调整结果窗口的大小对我不起作用。我确实有一小会儿认为这可能是个问题，但我尝试了两种方法，结果还是一样。这是Wordpress模板的一部分，我想知道一些插件或脚本是否可能影响媒体查询顺序，但这不应该是可能的，对吗？我也尝试过将较大分辨率的查询移到顶部，这样小分辨率的查询会优先处理，但这只会消除对更高分辨率查询的需要！重要的声明，我仍然必须为空或重置不需要的值。嗨，因为预览区域的宽度可能不会超过980px，我将其更改为480只是为了测试目的。你能检查一下它是否适合你吗？