Buradaki cevaplar sadece 2 hücre için işe yarıyor, ancak bu sütunlar daha fazla içeri girer girmez biraz daha karmaşıklığa yol açabilir. Birden fazla sütundaki herhangi bir sayıda hücre için genelleştirilmiş bir çözüm bulduğumu düşünüyorum.
#Goals Tasarımın tablet / masaüstünde istediği sırayla düzenlenmesi için mobil cihazlarda dikey bir etiket dizisi edinin. Bu somut örnekte, bir etiket normalde olduğundan daha erken, diğeri de normalde olduğundan daha sonra akış girmelidir.
## Mobil
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
## Tablet +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
Bu yüzden başlığın tablet + üzerinde sağa doğru karıştırılması gerekiyor ve teknik olarak da aynı şekilde, mobil cihazdan önce gelen altyazı etiketinin üstünde yer alıyor. Bir anda 4 başlığın da belada olduğunu göreceksiniz.
Her hücrenin yüksekliği değişebileceğini ve bir sonraki hücresiyle (tablo gibi zayıf hileleri dışarıda bırakarak) yukarıdan aşağıya doğru olması gerektiğini varsayalım.
Tüm Bootstrap Grid problemlerinde olduğu gibi 1. adım, HTML'nin sayfada mobil sırada, 1 2 3 4 5 olması gerektiğini anlamaktır. Daha sonra, bir tabletin / masaüstünün bu şekilde yeniden sıralanması için nasıl ideal olacağını belirleyin - ideal olarak Javascript olmadan.
Solüsyon almak 1 headlineve 3 qtysağa oturmak değil, sol basitçe ikisini ayarlamaktır pull-right. Bu float: right, CSS için geçerlidir , yani doğru sığacakları ilk açık alanı bulurlar. Tarayıcının CSS işlemcisinin aşağıdaki sırada çalıştığını düşünebilirsiniz: 1 sağ üst köşeye sığar. 2 sonraki ve normaldir ( float: left), bu yüzden sol üst köşeye gider. Sonra 3, bu float: rightyüzden 1'in altına atlar.
Ancak bu çözüm yeterli değildi 4 captions; çünkü sağdaki 2 hücre 2 imagesolda çok kısadır ve her ikisinin birleşiminden daha uzun olma eğilimindedir. Önyükleme Izgara abartılmış bir şamandıra kesmek anlamı 4 caption olduğunu float: left. İle 2 imagessolda çok oda işgal, 4 captiongirişimleri sonraki kullanılabilir alana sığması için - genellikle doğru sütun değil biz bunu istedik sol.
Buradaki çözüm (ve daha genel olarak bunun gibi herhangi bir sorun için), tablet + 'da altyazıları dışarı itmek için mevcut olan ve daha sonra negatif bir marjla kapsanan bir mobil hack etiketi eklemekti.
[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; }
}
Dolayısıyla, buradaki genel çözüm, mobil cihazlarda kaybolabilecek saldırı etiketleri eklemektir. Tablet + saldırıda, etiketler görüntülenen etiketlerin akışta daha erken veya daha sonra görünmesine izin verir, ardından bu saldırı etiketlerini örtmek için yukarı veya aşağı çekilir.
Not: Bağlantılı jsfiddle'daki basit örnek uğruna sabit yükseklikler kullandım, ancak üzerinde çalıştığım gerçek site içeriği 5 etiketin hepsinin yüksekliğine göre değişiyor. Etiket yüksekliklerinde, özellikle görüntü ve açıklamalarda nispeten büyük bir varyansla düzgün bir şekilde oluşturulur.
Not 2: Düzeninize bağlı olarak, tablet + (veya daha büyük çözünürlükler) üzerinde, margin-bottombunun yerine kullanarak kesmek etiketlerinin kullanılmasını önleyebileceğiniz tutarlı bir sütun düzenine sahip olabilirsiniz :
Not 3: Bu, Bootstrap 3'ü kullanır. Bootstrap 4 farklı bir ızgara seti kullanır ve bu örneklerle çalışmaz.
http://jsfiddle.net/b9chris/52VtD/16632/