仅使用css根据浏览器大小显示/隐藏div？

我正在尝试根据浏览器大小显示/隐藏一些div，只使用css媒体查询。。。但似乎什么都不起作用。。。如果可以，请帮助我，让我知道我做错了什么。。。提前谢谢

这是我的css

@media all and (max-width: 959px) {

    .content .700{display:block;}
    .content .490{display:none;}
    .content .290{display:none;}

}

@media all and (max-width: 720px) {

    .content .700{display:none;}
    .content .490{display:block;}
    .content .290{display:none;}

}

@media all and (max-width: 479px) {

    .content .700{display:none;}
    .content .490{display:none;}
    .content .290{display:block;}

}

这是我的html

<div class="content">
    <div class="700">this is the content for desktop</div>
    <div class="490">this is the content for tablet</div>
    <div class="290">this is the content for mobile</div>
</div>

这是桌面的内容
这是平板电脑的内容
这是手机的内容

类名不能以数字开头。将其更改为例如x700、x490、x290，它应该可以工作

类名

不能是数字，也不能以CSS中的数字开头。下面是一个例子，我更改了类名，它运行良好

---

谢谢！这成功了，顺便说一句，我还必须把

@media all和（最大宽度：959px）{

改成这个

@media all和（最小宽度：959px）{

，因为它再次显示了所有3个div的959px+谢谢！谢谢！这成功了，顺便说一句，我还必须把

@media all和（最大宽度：959px）{

改成这个

@media all和（最小宽度：959px）{

因为它显示了所有3个div的959px+！再次感谢！还有@Hushme-感谢jsfiddle链接！它真的很有帮助！不客气，我很高兴有对你有用的东西