Sama seperti column drop, pada viewport kecil, element akan disusun kebawah. Bila ada ruang pada viewport, maka beberapa elemen akan disusun dalam 1 row. Perbedaannya, pada layout shifter adalah, berpindahnya urutan element.
Perhatikan elemen biru dan kuning. Pada viewport kecil, elemen biru ada pada urutan pertama, dan kuning pada urutan ke-4. Pada viewport besar, urutan elemen kuning menjadi pertama, sementara biru menjadi ke-4.
Trick ini berguna jika desain layout membutuhkan perpindahan layout. Dan hal ini sangat mudah dilakukan karena menggunakan flexbox.
Pada viewport >= 600px, order dari flexbox diubah. Untuk element biru menjadi 1, elemen kuning menjadi -1. Element lainnya (merah dan hijau ada pada order default yaitu nol).
Ingin coba live? Silakan click di layout-shifter@codepen.io
@media screen and (min-width: 500px){
.blue{
width: 50%;
}
#container2{
width: 50%;
}
}
@media screen and (min-width: 600px){
.blue{
width: 25%;
order: 1;
}
#container2{
width: 50%;
}
.yellow{
width: 25%;
order: -1;
}
}
<!DOCTYPE html>
<html>
<title>Responsive Web - Layout shifter</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="container" id="container2">
<div class="box red"></div>
<div class="box green"></div>
</div>
<div class="box yellow"></div>
</div>
</body>
</html>