Załaduj prawą kolumnę na górze w widoku mobilnym

171

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.

schnawel007
źródło
2
Dla Bootstrap 4 patrz odpowiedź salmanhijazi
schnawel007

Odpowiedzi:

268

Aby to osiągnąć, użyj kolejności kolumn .

col-md-push-6"popchnie" kolumnę w prawo 6 i col-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

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

widok-port> = md

|A|B|

port widoku <md

|B|
|A|
Schmalzy
źródło
6
@JackTheKnife Spójrz na inną odpowiedź na to pytanie ... popychasz lub ciągniesz kolumnę o szerokość drugiej kolumny.
Schmalzy
1
@Schmalzy O yeah - inna odpowiedź ma lepsze wyjaśnienie. Okazało się również przydatne: scotch.io/tutorials/reorder-css-columns-using-bootstrap
JackTheKnife
1
Mam problem z trzema kolumnami, w których kolejność na stosie powinna być środkowa, lewa, prawa.
Goose
78

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:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

W przeciwnym razie wyrównanie kolumn będzie wyłączone.

apritch
źródło
Jak mogę w tym użyć, gdy ustawiłem offset<div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>
Muddasir Abbas
29

Kierunek Flexbox

W przypadku Bootstrap 4 zastosuj jedną z poniższych czynności do elementu div .row:

.flex-row-reverse

Elastyczne ustawienia:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
salmanhijazi
źródło
masz jakiś pomysł, jak osiągnąć to samo w weryfikacji?
Rakibul Haq
10

Poniższy kod działa dla mnie

.row {
    display: flex;
    flex-direction: column-reverse;
}
Miecz I
źródło
10

Załóżmy, że w Bootstrap 4 chcesz mieć jedno zamówienie na duże ekrany i inną kolejność na mniejsze ekrany:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

Możesz pominąć order-1i order-2powyż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

Abram
źródło
4

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.

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

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.

M61Vulcan
źródło
3

To zadziałało dla mnie w Bootstrap 4:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>
grób
źródło
2

Użyłem:

.row {
   display: flex;
   flex-direction: row-reverse;
}
Eric Conner
źródło