HTML显示/隐藏div使用CSS不起作用

Question

简单地说，

我有两个div

 <div class="menu-list">
    <div class="map-mobile" id="map"></div>
</div>
<div class="map-web" id="map"></div>

这是两个div的相应CSS：

.map-mobile {
    display: none;
}
.map-web {
    display: block;
}
@media (max-width: 767px) {
.map-mobile {
    display: block;
}
.map-web {
    display: none;
}
}

基本上，当屏幕尺寸达到767px或更低时，移动显示的地图和网页版本会隐藏。这有效，而当浏览器的大小正常时，Web地图不会显示。有什么理由可以吗？

由于