为什么“显示：无;”不能用于引导媒体请求？

Question

我正在使用引导程序处理响应式网页。我想在减小页面宽度后替换图像（使一个可见，另一个不可见）。

https://jsfiddle.net/mbe5huxa/

@media(max-width:767px) {
    .monitors {
          border: solid blue 8px;
        display: none;
    }
}

 <div class="monitors">
            <a href="#"><img src="https://static.pexels.com/photos/9574/pexels-photo-large.jpeg" alt="Background is loading"></a>
            </div>

它适用于JSfiddle，但由于某种原因在我的本地CSS中无法正常工作（我使用SASS编写CSS）。在我的情况下，缩小页面宽度后会出现蓝色边框的图像，但图像不会消失 为什么以及如何解决这个问题？