Jawaban di sini hanya berfungsi untuk 2 sel, tetapi segera setelah kolom-kolom tersebut memiliki lebih banyak di dalamnya, hal itu dapat menyebabkan kompleksitas yang lebih sedikit. Saya pikir saya telah menemukan solusi umum untuk sejumlah sel dalam beberapa kolom.
# Gol Dapatkan urutan vertikal tag di ponsel untuk mengatur diri mereka sendiri dalam urutan apa pun yang dibutuhkan desain di tablet / desktop. Dalam contoh konkret ini, satu tag harus masuk lebih cepat dari biasanya, dan satu lagi lebih lambat dari biasanya.
## Mobile
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
## Tablet +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
Jadi tajuk utama perlu diacak tepat di tablet +, dan secara teknis, begitu juga desc - itu berada di atas tag caption yang mendahuluinya di ponsel. Anda akan melihat dalam waktu 4 teks juga bermasalah
Mari kita asumsikan setiap sel dapat bervariasi dalam ketinggian, dan harus rata dari atas ke bawah dengan sel berikutnya (mengesampingkan trik yang lemah seperti meja).
Seperti semua masalah Bootstrap Grid, langkah 1 adalah untuk menyadari bahwa HTML harus dalam urutan seluler, 1 2 3 4 5, di halaman. Lalu, tentukan cara mendapatkan tablet / desktop untuk menyusun ulang sendiri dengan cara ini - idealnya tanpa Javascript.
Solusi untuk mendapatkan 1 headlinedan 3 qtyduduk di sebelah kanan, bukan ke kiri adalah dengan mengatur keduanya pull-right. Ini menggunakan CSS float: right, artinya mereka menemukan ruang terbuka pertama yang cocok untuk mereka. Anda dapat memikirkan prosesor CSS peramban yang bekerja dalam urutan berikut: 1 pas ke sudut kanan atas. 2 adalah berikutnya dan reguler ( float: left), jadi pergi ke sudut kiri atas. Kemudian 3, yang float: rightdemikian itu melompat di bawah 1.
Tetapi solusi ini tidak cukup untuk 4 captions; karena 2 sel kanan sangat pendek 2 imagedi sebelah kiri cenderung lebih panjang dari gabungan keduanya. Bootstrap Grid adalah float hack dimuliakan, artinya 4 caption adalah float: left. Dengan 2 imagesmenempati begitu banyak ruang di sebelah kiri,4 caption upaya untuk menyesuaikan dengan ruang yang tersedia berikutnya - seringkali kolom kanan, bukan sebelah kiri tempat yang kita inginkan.
Solusi di sini (dan lebih umum untuk masalah seperti ini) adalah menambahkan tag hack, disembunyikan di ponsel, yang ada di tablet + untuk mendorong caption keluar, yang kemudian ditutupi oleh margin negatif - seperti ini:
[2 image ][1 headline]
[ ][3 qty ]
[ ][4 hack ]
[5 captions][6 desc ^^^]
[ ][ ]
http://jsfiddle.net/b9chris/52VtD/16633/
HTML:
<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>
CSS:
#hack { height: 50px; }
@media (min-width: @screen-sm) {
#desc { margin-top: -50px; }
}
Jadi, solusi umum di sini adalah menambahkan tag hack yang dapat menghilang di ponsel. Pada tablet + retasan, tag memungkinkan tag yang ditampilkan muncul lebih awal atau lebih lambat dalam alur, lalu ditarik ke atas atau ke bawah untuk menutupi tag hack tersebut.
Catatan: Saya telah menggunakan ketinggian tetap demi contoh sederhana di jsfiddle yang ditautkan, tetapi konten situs aktual yang saya kerjakan bervariasi tingginya di semua 5 tag. Ini menghasilkan dengan benar dengan varians yang relatif besar di ketinggian tag, terutama gambar dan desc.
Catatan 2: Bergantung pada tata letak Anda, Anda mungkin memiliki urutan kolom yang cukup konsisten pada tablet + (atau resolusi yang lebih besar), sehingga Anda dapat menghindari penggunaan tag hack, menggunakan margin-bottomsebaliknya, seperti:
Catatan 3: Ini menggunakan Bootstrap 3. Bootstrap 4 menggunakan set grid yang berbeda, dan tidak akan bekerja dengan contoh-contoh ini.
http://jsfiddle.net/b9chris/52VtD/16632/