Mam taką stronę Bootstrap:
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>
Wygląda jak:
-----
|A|B|
-----
Więc jeśli spojrzę na to na urządzeniu mobilnym, kolumna A jest na górze, ale chcę, aby B na górze. czy to możliwe? Spróbowałem z popchnięciem i pociągnięciem, ale nie zadziałało.
html
css
twitter-bootstrap-3
schnawel007
źródło
źródło
Odpowiedzi:
Aby to osiągnąć, użyj kolejności kolumn .
col-md-push-6
"popchnie" kolumnę w prawo 6 icol-md-pull-6
"pociągnie" kolumnę w lewo na "md" lub nowszych portach widoku. Na wszystkich mniejszych portach widoku kolumny będą ponownie w normalnej kolejności.Myślę, że to, co rzuca się ludziom, że trzeba umieścić B powyżej w kodzie HTML . Może istnieć inny sposób, aby to zrobić, gdzie A może przejść nad B w HTML, ale nie jestem pewien, jak to zrobić ...
PRÓBNY
widok-port> = md
port widoku <md
źródło
Warto zauważyć, że jeśli używasz kolumn, które nie są równe 6, kwota wypychania nie będzie równa początkowemu rozmiarowi kolumny.
Jeśli masz dwie kolumny (A i B) i chcesz, aby kolumna A była mniejsza i znajdowała się po prawej stronie w rzutniach „sm” lub większych, ale na szczycie rzutni mobilnej (xs), możesz użyć następującego:
W przeciwnym razie wyrównanie kolumn będzie wyłączone.
źródło
<div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>
W przypadku Bootstrap 4 zastosuj jedną z poniższych czynności do elementu div .row:
Elastyczne ustawienia:
źródło
Poniższy kod działa dla mnie
źródło
Załóżmy, że w Bootstrap 4 chcesz mieć jedno zamówienie na duże ekrany i inną kolejność na mniejsze ekrany:
Możesz pominąć
order-1
iorder-2
powyżej. Dodano tylko dla jasności. Kolejność domyślna to kolejność, w jakiej kolumny pojawiają się w html.Aby uzyskać więcej informacji, https://getbootstrap.com/docs/4.1/layout/grid/#reordering
źródło
Odbywa się to teraz (w Bootstrap v4) przez dodanie klas order- #.
Zobacz https://getbootstrap.com/docs/4.1/migration/#grid-system-1
Lubię to:
źródło
Mam trzy kolumny bootstrap 4 o różnych rozmiarach. W miarę zmniejszania się ekranu trzecia kolumna jest ukrywana, a gdy ekran staje się jeszcze mniejszy, a elementy div są ułożone w stos, kolejność zmienia się tak, że kolumna 2 jest na górze.
Mam nadzieję, że to pomoże. Trudno mi było to zrozumieć, ale w końcu dotarłem tam z pomocą tego wątku, ale było to trochę chybione.
źródło
To zadziałało dla mnie w Bootstrap 4:
źródło
Użyłem:
źródło
W Bootstrap V4 (wydany 18 stycznia 2018 r.) Możesz użyć zmiany kolejności klas. Informacje tutaj w zakładce Zmiana kolejności.
https://getbootstrap.com/docs/4.0/layout/grid/
źródło
Bootstrap 4 zawiera klasy dla flex. Zobacz: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/
źródło