Zeigen Sie ein Div auf dem Desktop und zeigen Sie ein anderes Div auf Handy mit CSS

Question

Ich möchte eine bestimmte div auf Desktop und Tablet zeigen, aber ich möchte dieses div auf dem mobilen Bildschirm ausblenden. Im mobilen Bildschirm möchte ich ein anderes Div anzeigen, also möchte ich die beiden Divs tauschen.

Dies ist mein Versuch:

.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

Ja media query verwenden Sie hide div bei bestimmten screen-resolution wie im folgenden Beispiel, aber CSS Styling Eigenschaft visibility nur hides ein element, aber immer noch layout sichtbar ist, dass Effekte andere Elemente, um es völlig zu verstecken verwenden Sie display als none, versuchen Sie unter Beispiel,

.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; 
} 

}