Pendahuluan
Ada beberapa strategi umum yang digunakan, yaitu: Column drop, layout shifter dan off canvas. Pada prakteknya umum untuk menerapkan beberapa strategi, misalnya column drop dan off canvas.
Idenya adalah, pada viewport kecil, semua elemen akan dibuat menumpuk kebawah menjadi 1 column. Sementara, jika ada ruang pada viewport, maka elemen akan disusun sesuai kebutuhan desain.
Column Drop
Pendekatan column drop adalah pada viewport kecil, element akan diturunkan kebawah. Ketika viewport lebih luas, elemen dapat disusun kesamping.
CSS yang digunakan adalah seperti berikut. Saat viewport >= 550px, element biru, merah dan hijau 1 row. Ketika Viewport mengecil yaitu >= 450 namun < 550px, maka element hijau di drop kebawah. Begitu selanjut, ketika viewport < 450px, maka semua element disusun kebawah menjadi 1 column.
Ingin coba live? Silakan click di column-drop@codepen.io
@media screen and (min-width: 450px){
.blue{
width: 25%;
}
.red{
width: 75%;
}
}
@media screen and (min-width: 550px){
.blue{
width: 25%;
}
.red{
width: 50%;
}
.green{
width: 25%;
}
}
<!DOCTYPE html>
<html>
<title>Responsive Web - Column Drop</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="container">
<div class="box blue"></div>
<div class="box red"></div>
<div class="box green"></div>
</div>
</body>
</html>