Zeigen Sie zwei divs auf mobilen Geräten, aber eine auf dem Desktop ausblenden, mit Medienabfrage

Question

In meinem Projekt habe ich zwei divs (d. H. # div1, # div2). Ich möchte beide divs auf mobilen Geräten und nur # div1 auf Desktop-Geräten zeigen.

@media screen and (max-width: 600px) { 
     #div1 { 
      display: none; 
     } 
} 

In diesem Fall arbeiten als Desktop-Show- # div1, # div2 und mobile # div2 zeigt.

Aber ich will Desktop # div1 und mobile Endgeräte zeigen # div1 zu zeigen, # div2

Wie man ein @ media-Abfrage für diese schreiben kann. Ich kann es nicht verstehen.

Answer 1

/* mobile first */ 
 

 
.div1, .div2 { 
 
    padding: 20px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.div1 { 
 
    background-color: pink; 
 
} 
 

 
.div2 { 
 
    background-color: tan; 
 
} 
 

 

 
@media screen and (min-width: 600px) { 
 
    .div1{ 
 
    display: none; 
 
    } 
 
}

<div class="div1">DIV 1</div> 
 
<div class="div2">DIV 2</div>

Sie haben es tauschen nur min für max in der Abfrage Medien.