Mam 3 kolumny, które chcę zamówić na różne sposoby na komputerze i telefonie komórkowym. Obecnie mój gird wygląda tak:
<div class="row">
<div class="col-xs-3 col-md-6">
1
</div>
<div class="col-xs-3 col-md-6">
2
</div>
<div class="col-xs-6 col-md-12">
3
</div>
</div>
W widoku mobilnym chcę mieć następujące dane wyjściowe:
1-3-2
Niestety nie wiem, jak rozwiązać ten problem za pomocą klas .col-md-push-*
i .col-md-pull-*
w Bootstrap 4.
css
bootstrap-4
grid
Cray
źródło
źródło
Odpowiedzi:
2018 - Powrót do tego pytania z najnowszym Bootstrap 4.
Reagującym klas zamawiania są teraz
order-first
,order-last
aorder-0
-order-12
Bootstrap 4 Push pociągowe klasy są teraz(działa tylko w wersji pre 4.0 beta)push-{viewport}-{units}
ipull-{viewport}-{units}
axs-
infix został usunięty. Aby uzyskać pożądany układ 1-3-2 na mobile / xs, wyglądałoby następująco: Bootstrap 4 push pull demoBootstrap 4.1+
Ponieważ Bootstrap 4 to flexbox, łatwo jest zmienić kolejność kolumn. Kolumny można uporządkować od
order-1
doorder-12
, w sposób responsywny, na przykładorder-md-12 order-2
(ostatni dzieńmd
, drugi dzieńxs
) względem rodzica.row
.<div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-body">1</div> </div> <div class="col-6 col-md-12 order-2 order-md-12"> <div class="card card-body">3</div> </div> <div class="col-3 col-md-6 order-3"> <div class="card card-body">2</div> </div> </div> </div>
Demo: Zmień kolejność za pomocą
order-*
klasPulpit (większe ekrany):
Mobilne (mniejsze ekrany):
Możliwa jest również zmiana kolejności kolumn za pomocą narzędzi kierunkowych flexbox ...
<div class="container"> <div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> 2 </div> <div class="col-md-4"> 1st on mobile </div> </div> </div>
Demo: Bootstrap 4.1 Change Order z Flexbox Direction
Starsza wersja demo
demo - alpha 6
demo - beta (3)
Zobacz więcej demonstracji Bootstrap 4.1+
Powiązane:
Kolejność kolumn w Bootstrap 4 z funkcją push / pull i col-md-12
Bootstrap 4 zmienia kolejność kolumn
ACB ABC
źródło
order-*
Klasy nie mogą być używane wielokrotnie. Tak to działa. Z dokumentacji .. „Te klasy są responsywne, więc możesz ustawić kolejność według punktu przerwania (np. .Order-1.order-md-2). Obejmuje obsługę od 1 do 12 we wszystkich pięciu warstwach siatki.”order-2 order-md-12
klas nie można używać razem?order-md-1 order-sm-2
iorder-1 order-sm-2
nie działa. Robię to ręcznieMożna to również osiągnąć za pomocą właściwości CSS „Order” i zapytania o media.
Coś takiego:
@media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } }
Link do CodePen: https://codepen.io/preston206/pen/EwrXqm
źródło
nawet to zadziała:
<div class="container"> <div class="row"> <div class="col-4 col-sm-4 col-md-6 order-1"> 1 </div> <div class="col-4 col-sm-4 col-md-6 order-3"> 2 </div> <div class="col-4 col-sm-4 col-md-12 order-2"> 3 </div> </div> </div>
źródło
Używam Bootstrap 3, więc nie wiem, czy istnieje łatwiejszy sposób na zrobienie tego Bootstrap 4, ale ten CSS powinien działać dla Ciebie:
.pull-right-xs { float: right; } @media (min-width: 768px) { .pull-right-xs { float: left; } }
... i dodaj klasę do drugiej kolumny:
<div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6 pull-right-xs"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div>
EDYTOWAĆ:
Och ... wygląda na to, że to, co napisałem powyżej, jest dokładnie a. pull-xs-right class w Bootstrap 4: X Po prostu dodaj go do drugiej kolumny i powinno działać idealnie.
źródło
Ponieważ kolejność kolumn nie działa w Bootstrap 4 beta, jak opisano w kodzie podanym w zrewidowanej odpowiedzi powyżej, musisz użyć następujących (jak wskazano w demonstracji zamówienia codeply 4 Flexbox - linki alfa / beta, które zostały dostarczone w odpowiedź).
<div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-block">1</div> </div> <div class="col-6 col-md-12 flex-md-last"> <div class="card card-block">3</div> </div> <div class="col-3 col-md-6 "> <div class="card card-block">2</div> </div> </div>
Należy jednak pamiętać, że „Demo zamówienia Flexbox - beta” przechodzi do bazy kodu alfa, a zmiana bazy kodu na Beta (i uruchomienie jej) powoduje nieprawidłowe wyświetlanie elementów div w jednej kolumnie - ale wygląda to na problem z kodem wklejanie kodu z codeply działa zgodnie z opisem.
źródło
Możesz zrobić dwa różne kontenery, jeden z mobilnym zamówieniem i ukryciem na ekranie komputera, drugi z zamówieniem na komputerze i ukryj się na ekranie mobilnym
źródło