Css 媒体查询隐藏/显示div

我能够让它在桌面上显示左Ctr右列，在手机上显示R右列。我现在想做的是添加一个只在手机上显示的第四列，但没有成功。因此，L、C、R在桌面上，第四列仅在移动设备上。我试着在同一个分区中设置第四列，但它会隐藏在桌面上，但在手机上不会显示。所以我创建了新的div id：“mobSlide”来包含第4列，我隐藏/显示了“mobSlide”div，但这也不起作用。有什么想法吗

<div class="slideshowBL"><img src="../images/slideshow/pouch.jpg" />
</div>
</div>

<div id="centerCol">
<div class="slideshowCT"><img src="../images/slideshow/basso56.jpg" />
</div>

<div class="slideshowCB"><img src="../images/slideshow/bruschetta.jpg" />
</div>

<div class="slideshowR" id="rightCol"><img src="../images/slideshow/kettle.jpg" />
</div>

<div id="mobSlide">
<div class="slideshowR" id="rightCol2"><img src="../images/slideshow/kettle.jpg" />
</div>
</div>
</div>

下面是代码：

<div class="slideshowBL"><img src="../images/slideshow/pouch.jpg" />
</div>
</div>

<div id="centerCol">
<div class="slideshowCT"><img src="../images/slideshow/basso56.jpg" />
</div>

<div class="slideshowCB"><img src="../images/slideshow/bruschetta.jpg" />
</div>

<div class="slideshowR" id="rightCol"><img src="../images/slideshow/kettle.jpg" />
</div>

<div id="mobSlide">
<div class="slideshowR" id="rightCol2"><img src="../images/slideshow/kettle.jpg" />
</div>
</div>
</div>

CSS桌面：

<div class="slideshowBL"><img src="../images/slideshow/pouch.jpg" />
</div>
</div>

<div id="centerCol">
<div class="slideshowCT"><img src="../images/slideshow/basso56.jpg" />
</div>

<div class="slideshowCB"><img src="../images/slideshow/bruschetta.jpg" />
</div>

<div class="slideshowR" id="rightCol"><img src="../images/slideshow/kettle.jpg" />
</div>

<div id="mobSlide">
<div class="slideshowR" id="rightCol2"><img src="../images/slideshow/kettle.jpg" />
</div>
</div>
</div>

  #leftCol {
      display: block;
  }

  #centerCol {
      display: block;
  }
   #rightCol {
       display:block;
  }

   #mobSlide { display:none;
      }

---

考虑将媒体查询添加到您的帮助中； 如果您知道div应显示的分辨率，请尝试以下操作：

<div class="slideshowBL"><img src="../images/slideshow/pouch.jpg" />
</div>
</div>

<div id="centerCol">
<div class="slideshowCT"><img src="../images/slideshow/basso56.jpg" />
</div>

<div class="slideshowCB"><img src="../images/slideshow/bruschetta.jpg" />
</div>

<div class="slideshowR" id="rightCol"><img src="../images/slideshow/kettle.jpg" />
</div>

<div id="mobSlide">
<div class="slideshowR" id="rightCol2"><img src="../images/slideshow/kettle.jpg" />
</div>
</div>
</div>

@media all and (max-width: 600px){
    #mobSlider{
        display: block;
    }
}

---

更新：这里有一个示例来说明CSS mobile change的示例（缩小和扩展屏幕）

：

<div class="slideshowBL"><img src="../images/slideshow/pouch.jpg" />
</div>
</div>

<div id="centerCol">
<div class="slideshowCT"><img src="../images/slideshow/basso56.jpg" />
</div>

<div class="slideshowCB"><img src="../images/slideshow/bruschetta.jpg" />
</div>

<div class="slideshowR" id="rightCol"><img src="../images/slideshow/kettle.jpg" />
</div>

<div id="mobSlide">
<div class="slideshowR" id="rightCol2"><img src="../images/slideshow/kettle.jpg" />
</div>
</div>
</div>

#mobSlide {
    }

致：

<div class="slideshowBL"><img src="../images/slideshow/pouch.jpg" />
</div>
</div>

<div id="centerCol">
<div class="slideshowCT"><img src="../images/slideshow/basso56.jpg" />
</div>

<div class="slideshowCB"><img src="../images/slideshow/bruschetta.jpg" />
</div>

<div class="slideshowR" id="rightCol"><img src="../images/slideshow/kettle.jpg" />
</div>

<div id="mobSlide">
<div class="slideshowR" id="rightCol2"><img src="../images/slideshow/kettle.jpg" />
</div>
</div>
</div>

---

非常感谢。正在等待服务器更新以进行检查。它在dreamweaver中工作，没有显示，但也许浏览器需要它？嘿，杰克，我没有这么做。不知道发生了什么。如何撤消？手机中仍不显示。以下是站点：和CSS：它在dreamweaver中运行良好，但在浏览器或移动设备中不起作用。