两个并列的class同时用@media只有一个生效，另一个不生效且审查元素找不到相应CSS。

如果想让两个DIV并排显示，在PC端浏览时，一个宽度占70%，另一个占30%；移动端浏览时第一个div全屏显示，第二个div不显示，用了如下代码，其中第一个div想要的效果达成了，第二个div没生效，CSS写成内联式和外部式都不起作用，在浏览器中审查元素也找不到相关CSS代码，这是什么情况原因导致的呢？

@media (min-width: 768px){

   .article-detail {position: relative;float: left;width: 70%;}

}

@media (max-width: 768px){

   .article-detail {position: relative;float: left;width: 100%;}

}

@media (max-width:768px){

.right-contant {position: relative;float: right;width: 30%;}

}

@media (max-width:768px){

.right-contant {display: none;}

}