Afficher un div sur le bureau et montrer un autre div sur mobile avec CSS

Question

Je veux montrer un div particulier sur le bureau et la tablette, mais je veux cacher ce div dans l'écran mobile. Dans l'écran mobile, je veux montrer une autre div, donc je veux échanger les deux divs.

C'est ma tentative:

.div-only-mobile { 
    visibility: hidden; 
    display: none; 
} 

@media screen and (max-width: 849px) { 

.div-no-mobile { 
    visibility: hidden; 
} 

.div-only-mobile { 
    visibility: visible; 
    display: block; 
} 

} 

Answer 1

Oui à l'aide media query vous pouvez hide div à certains screen-resolution comme exemple ci-dessous, mais CSS propriété style visibility juste hides un element, mais toujours layout est visible que les effets d'autres éléments, pour le cacher totalement utiliser display comme none, essayez ci-dessous exemple,

.desk{ 
 
    width:400px; 
 
    height:200px; 
 
    background:red; 
 
} 
 
.div-only-mobile{ 
 
    width:400px; 
 
    height:200px; 
 
    background:orange; 
 
} 
 
@media screen and (max-width : 1920px){ 
 
    .div-only-mobile{ 
 
    visibility:hidden; 
 
    } 
 
} 
 
@media screen and (max-width : 906px){ 
 
.desk{ 
 
    visibility:hidden; 
 
    } 
 
.div-only-mobile{ 
 
    visibility:visible; 
 
    } 
 
}

<div class="desk">Large Screen</div> 
 
<div class="div-only-mobile">Only Mobile</div> 
 
<p>Demo Text.</p>

Answer 2

.div-only-mobile { 
    display: none; 
} 
.div-no-mobile { 
    display: block; 
} 
@media screen and (max-width: 849px) { 

.div-no-mobile { 
    display:none 
} 

.div-only-mobile { 
    display: block; 
} 

}