レスポンスHTMLでdivを削除または非表示にする方法

Question

デスクトップ版では4つの写真がインライン（4つのdivを含む）で表示されるコンテナが1つありますが、タブレットに3枚の写真をインラインで表示したいのでモバイル版ではバージョンと写真が2枚。

メディアクエリでそのdiv（画像）を削除したり、何らかの形で非表示にすることはできますか？または、最初のモバイル開発から始める場合、その写真を追加する方法。

ありがとうございます。

Answer 1

/* Smartphones ----------- */ 
@media only screen and (max-width : 767px) { 
    .ur_class:nth-child(3), 
    .ur_class:nth-child(4) { 
     display: none; 
    } 
} 

/* Tab ----------- */ 
@media only screen and (max-width : 991px) and (min-width : 768px) { 
    .ur_class:nth-child(4) { 
     display: none; 
    } 
} 

Answer 2

hide-on-mobile-portraitのような適切なクラス名をモバイルで非表示にして、モバイルデバイスを対象としたメディアクエリにdisplay: noneと指定します。

このよう

：あなたはここから多くのメディアクエリを取ることができ

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
    .hide-on-mobile-portrait { 
     display: none; 
    } 
} 

：https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/