Mengalami perilaku aneh setelah menguji situs web responsif saya di seluler dan berharap saya bisa mendapatkan wawasan tentang apa yang sedang terjadi. Pada dasarnya, saya memiliki satu baris bootstrap yang berisi 23 gambar. Pada resolusi iPhone saya (375 x 667), saya melihat hasil yang berbeda dengan tampilan baris dibandingkan dengan browser desktop yang diatur ke resolusi tersebut.
Tujuan saya adalah menampilkan gambar secara berpasangan hingga baris terakhir, yang akan memiliki gambar di tengah. Selain kelas baris bootstrap standar, saya juga menambahkan kelas bernama flex yang menggunakan css berikut:
.flex {
display: flex;
justify-content: center;
flex-flow: row wrap;
position: relative;
}
HTMLnya mirip dengan ini:
<div class="row flex">
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
</div>
Di desktop, sekecil apa pun saya membuat layar, gambar ditampilkan sesuai harapan. Entah kenapa di ponsel, gambar pertama dalam grup adalah gambar yang ditampilkan sendiri, dan gambar setelahnya ditampilkan berpasangan.
Mengapa perilaku tampilan ini bertolak belakang antara desktop dan seluler?
CodePen menunjukkan perilaku yang diharapkan: codepen.io/anon/pen/jZWGNj . Masalahnya adalah perilaku ini sangat berlawanan di perangkat seluler (iPhone, Android, iPad).
Sunting: Saya hanya ingin mengklarifikasi bahwa 'kolom khusus' dalam hal ini hanyalah kolom bootstrap kalengan sejauh menyangkut nilai lebar.
