Odpowiedzi tutaj działają tylko dla 2 komórek, ale gdy tylko te kolumny będą zawierały więcej, może to prowadzić do nieco większej złożoności. Myślę, że znalazłem uogólnione rozwiązanie dla dowolnej liczby komórek w wielu kolumnach.
Cele
Uzyskaj pionową sekwencję tagów na urządzeniu mobilnym, aby ułożyć je w dowolnej kolejności, jakiej wymaga projekt na tablecie / komputerze. W tym konkretnym przykładzie jeden tag musi wejść w przepływ wcześniej niż zwykle, a drugi później niż zwykle.
mobilny
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
Tablet +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
Nagłówek musi więc zostać przetasowany bezpośrednio na tablecie + i technicznie tak samo, jak desc - znajduje się nad tagiem podpisu, który poprzedza go na telefonie komórkowym. Za chwilę zobaczysz, że 4 podpisy też mają kłopoty.
Załóżmy, że każda komórka może mieć różną wysokość i musi być wyrównana od góry do dołu w następnej komórce (wykluczając słabe sztuczki jak stół).
Podobnie jak w przypadku wszystkich problemów z siecią Bootstrap, krok 1 polega na uświadomieniu sobie, że HTML musi być w kolejności mobilnej, 1 2 3 4 5, na stronie. Następnie określ, w jaki sposób zmusić tablet / pulpit do zmiany kolejności w ten sposób - najlepiej bez Javascript.
Rozwiązaniem, aby dostać się 1 headlinei 3 qtyusiąść po prawej, a nie po lewej, jest po prostu ustawić je oba pull-right. Dotyczy to CSS float: right, co oznacza, że znajdują pierwszą otwartą przestrzeń, którą zmieszczą po prawej stronie. Możesz pomyśleć o procesorze CSS przeglądarki działającym w następującej kolejności: 1 pasuje do prawego górnego rogu. 2 jest następny i jest zwykły ( float: left), więc przechodzi do lewego górnego rogu. Następnie 3, czyli float: rightprzeskakuje pod 1.
Ale to rozwiązanie nie wystarczyło 4 caption; ponieważ prawe 2 komórki są tak krótkie 2 imagepo lewej stronie, zwykle są dłuższe niż oba razem. Bootstrap Siatka jest uwielbiony pływak hack, sens 4 caption jest float: left. Z 2 imagezajmując tak dużo miejsca na lewo,4 caption próbuje zmieścić się w następnej dostępnej przestrzeni - często w prawej kolumnie, a nie w lewo, gdzie chcieliśmy.
Rozwiązaniem tutaj (i bardziej ogólnie dla każdego takiego problemu) było dodanie tagu hacka, ukrytego na telefonie komórkowym, który istnieje na tablecie + w celu wypchnięcia podpisu, który następnie zostaje zakryty przez ujemny margines - tak:
[2 image ][1 headline]
[ ][3 qty ]
[ ][4 hack ]
[5 caption][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; }
}
Uogólnione rozwiązanie polega na dodaniu tagów hakerskich, które mogą zniknąć na urządzeniach mobilnych. Na tablecie + tagi hakerskie pozwalają, aby wyświetlane tagi pojawiały się wcześniej lub później w przepływie, a następnie zostały pociągnięte w górę lub w dół, aby zatuszować te tagi hakerskie.
Uwaga: Użyłem stałych wysokości dla prostego przykładu w połączonym jsfiddle, ale rzeczywista zawartość witryny, nad którą pracowałem, ma różną wysokość we wszystkich 5 tagach. Odwzorowuje się poprawnie przy stosunkowo dużej różnicy wysokości znaczników, szczególnie obrazu i opisu.
Uwaga 2: W zależności od układu możesz mieć wystarczająco spójną kolejność kolumn na tablecie + (lub w wyższych rozdzielczościach), aby uniknąć używania tagów hakerskich, używając margin-bottomzamiast tego:
Uwaga 3: Używa Bootstrap 3. Bootstrap 4 używa innego zestawu siatek i nie działa z tymi przykładami.
http://jsfiddle.net/b9chris/52VtD/16632/