Zamów kolumny przez Bootstrap4


80

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.



col-xx-push- i col-xx-pull- są takie same jak bootstrap 3. Czy chcesz mieć siatkę dla „md” i powyżej 1-2, innego rzędu 3 i dla „sm” i poniżej 1-3-2 ?
tmg,

Odpowiedzi:


139

2018 - Powrót do tego pytania z najnowszym Bootstrap 4.

Reagującym klas zamawiania są teraz order-first, order-lasta order-0-order-12

Bootstrap 4 Push pociągowe klasy są teraz push-{viewport}-{units}i pull-{viewport}-{units}a xs-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 demo (działa tylko w wersji pre 4.0 beta)


Bootstrap 4.1+

Ponieważ Bootstrap 4 to flexbox, łatwo jest zmienić kolejność kolumn. Kolumny można uporządkować od order-1do order-12, w sposób responsywny, na przykład order-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-*klas

Pulpit (większe ekrany): wprowadź opis obrazu tutaj

Mobilne (mniejsze ekrany): wprowadź opis obrazu tutaj

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


@Alireza - 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.”
Zim

@Zim Więc order-2 order-md-12klas nie można używać razem?
Alireza,

Nie, można ich używać razem.
Zim

@Zim order-md-1 order-sm-2i order-1 order-sm-2nie działa. Robię to ręcznie
Alireza

Działają, jeśli używasz wersji wskazanej powyżej codeply.com/go/23VFxwWTdP . Nie wiem też, co próbujesz osiągnąć, co najprawdopodobniej różni się od pierwotnego pytania, do którego odnosi się moja odpowiedź. Pamiętaj, że kolumny są względem siebie w tym samym wierszu.
Zim

22

Moż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


Nie udało mi się uzyskać zamówienia z klasami bootstrap tylko dla urządzeń mobilnych. To zadziałało, dzięki
Xavier Ojeda Aguilar

3

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>

2

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.


Ops ... popełniłem błąd w kodzie stylu: X Spróbuj teraz. A jeśli to nie zadziała, spróbuj dodać! Important to float.
Marek Kus

1
To jest to samo. Pracowałem z klasą .pull-xs-right z Bootsrap 4.
Cray

-1

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.


-4

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


2
To by działało, ale jest to niepotrzebne powielanie danych. Możesz to zrobić manipulując parametrem typu float (i prawdopodobnie na kilka innych sposobów).
Marek Kus
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.