媒体查询隐藏/显示 div

Question

我能够让它在桌面上显示 Left Ctr Right 列，而仅在移动设备上显示 R。我现在尝试做的是添加仅在移动设备上显示的第 4 列，但未成功。所以桌面上的 L,C,R，只有移动设备上的第 4 列。我尝试将第 4 列放在同一个 div 中，但它会隐藏在桌面上，但不会显示在移动设备上。所以我创建了新的 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>

CSS 移动： #leftCol，#centerCol，#rightCol { 显示：无； } #leftCol { 宽度：205px； 向左飘浮; 边距：0； 填充：0； }

  #centerCol {
      width: 150px;
      float: left;
      margin: 0;
      padding-left: 10px;
  }

  #rightCol {
      width: 250px;
      float: left;
      margin: 0;
      padding-left: 10px;
  }

   #mobSlide {
      }

CSS 桌面：

  #leftCol {
      display: block;
  }

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

   #mobSlide { display:none;
      }

Answer 1

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

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

更新：这里有一个jsfiddle 示例来说明该示例（缩小和扩大屏幕）

Answer 2

随着 CSS 移动变化：

#mobSlide {
    }

收件人：

#mobSlide {
    display: block;
}