Html 引导不起作用的媒体查询

我想为移动设备隐藏大图片。我在css中添加了以下样式：

//medium+ screen sizes
@media (min-width:992px) {
    .desktop {
            display:block !important;
    }
}

//small screen sizes
@media (max-width:991px) {
    .mobile {
            display:block !important;
    }

    .desktop {
            display:none !important;
    }
}

然后我在html中应用该类，如下所示：

<img class="desktop" src="img/test/test.jpg" 
    alt="jhkjhjk" height="600" width="900">

---

但当我缩小浏览器窗口时，图像仍保留在那里。我错过了什么吗？

因为你在使用Boostrap，所以你可以做得更简单

附加一类

visible-md

为了你的形象

md表示大于992像素

查看您可以使用的简单类

---

编辑：如果你想做可视的话，可能想做可视的md可视的lg。图表解释了所有的组合。

太棒了，我就这么做更好了。尽管如此，为什么我的媒体查询不起作用？我不是最擅长媒体查询的，但您可能需要指定媒体tpye“@media screen”