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

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.

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|

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.

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

Poniższy kod działa dla mnie

.row {
    display: flex;
    flex-direction: column-reverse;
}

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

Odbywa się to teraz (w Bootstrap v4) przez dodanie klas order- #.

Zobacz https://getbootstrap.com/docs/4.1/migration/#grid-system-1

Lubię to:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

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.

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>

Użyłem:

.row {
   display: flex;
   flex-direction: row-reverse;
}

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/

Bootstrap 4 zawiera klasy dla flex. Zobacz: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>