デスクトップでdivを表示し、CSSで携帯で別のdivを表示

Question

デスクトップとタブレットに特定のdivを表示したいが、モバイル画面でこのdivを非表示にしたいモバイル画面で別のdivを表示したいので、私は2つのdivを交換したいと思います。

これは私の試みです：

.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

はいあなたが例以下のように特定のscreen-resolutionでhide divをすることができますが、CSSスタイリングプロパティvisibilityだけ​​elementを、まだlayoutmedia queryを使用すると、目に見える効果ということです他の要素は、displayをnoneとして完全に非表示にするには、次の例を試してみてください。

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

}