Yardım Edebilecek ?

Merhaba Arkadaşlar,

Bir konuda sizden yardım istemekteyim. Yardımcı olabilecek arkadaşlar var ise memnun kalıdırm.
evkur . com sitesinin anasayfasında alt tarafda bilgisayar ortamında 4 sıralı mobil ortamda 2 sıralı ürünler sergilenmektedir. Aynı mantıkta bende 4 resım yerleştirmek istiyorum. Tarayıcıya göre göstermesini istemekteyim. Bilgisayardan veya tabletten girildiğinde 4 lü olarak sıralanmasını istiyorum. Mobilden girildiginde ise otomatik olarak 2 li olarak sıralanmasını istiyorum. bunu tek bir html sayfasında nasıl yapabilirim ? bu konuda yardımcı olabilecek arkadaşlar var ise yardımcı olmalarını istiyorum. Şimdiden yardımcı olabilen arkadaşlara teşekkür ederim.

Bootstrap kullanabilirsin en basit şekilde düzenlemek için

Hocam bu konuya yabancıyım. Tarif edebilirmisiniz yada bir tane test hazırlayıp paylaşabilirmisiniz. ben üzerinde editleme yapayım.

üstad detaylı inceleyebilirsin
https://getbootstrap.com/docs/4.4/layout/grid/

öncelikle html kodlarımızı yerleştirelim.

<div class="resimler">

<img src="resim-adresi" alt="alt isim" witdth="100" height="100" />
<img src="resim-adresi" alt="alt isim" witdth="100" height="100" />
<img src="resim-adresi" alt="alt isim" witdth="100" height="100" />
<img src="resim-adresi" alt="alt isim" witdth="100" height="100" />

<div>

.resimler img {width:25%;float:left;padding:5px;}

/* tablet için */
@media screen and (min-witdh:768px) and (max-width:1023) {
.resimler img {width:25%;float:left; padding:5px;}
}
/* mobil için */
@media (max-width:768px) {
.resimler  img {width:50% !important;float:left;padding:5px;}
}

gibi bir örnekleme ile yapabilirsin sanırım kodları kafamdan yazdım test etmedim test edip geri dönüş sağlarsan akşam detaylıca yardımcı olurum.

sanırım biyerde hata var. calısmadı . teşekkür ederim yinede

https://jsfiddle.net/k2aohxcy/2/

çalışıyor her hangi bir sıkıntı yok