响应性的div关系

Question

我有2个div，里面有一些元素。

我希望在宽度> 600px时显示div并隐藏另一个div，并在宽度> 600px时隐藏div并显示另一个。我已尝试使用此代码，但它不起作用：

@media (min-width: 601px) { 


 .organigramma-desktop {   
display: inline;
}

.organigramma-mobile {   
 display: none;
}}



@media (max-width: 600px) { 

 .organigramma-desktop {   
   display: none;
 }
  .organigramma-mobile {   
 display: inline;
 }
 }

谢谢

Answer 1

媒体查询应用于现有样式之上，因此您应定义桌面样式，并仅在需要时添加移动样式

.organigramma-desktop {   
    display: inline;
}

.organigramma-mobile {   
    display: none;
}

@media (max-width: 600px) { 
     .organigramma-desktop {   
       display: none;
     }

     .organigramma-mobile {   
        display: inline;
     }
 }