Kolejność kolumn w Bootstrap 4

Mam 3 kolumny, które chcę zamówić na różne sposoby na komputerach stacjonarnych i mobilnych. 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ącą kolejność:

1-3-2

Niestety nie rozumiem, jak to rozwiązać z .col-md-push - * i .col-md-pull - * zajęcia w Bootstrap 4.

Author: Zim, 2016-06-14
Source

6 answers

Powrót do tego pytania z najnowszym Bootstrap 4.0 + .

Responsywne klasy porządkowe są teraz order-first, order-last oraz order-0 - order-12

Bootstrap 4 push klasa pull to teraz push-{viewport}-{units} i pull-{viewport}-{units}, A infiks xs- został usunięty. Aby uzyskać pożądany układ 1-3-2 na mobile/xs, należy: Bootstrap 4 push pull demo

Ponieważ Bootstrap 4 to flexbox, łatwo jest zmienić kolejność kolumny. Cols mogą być uporządkowane od order-1 do order-12, odpowiednio np. order-md-12 order-2 (ostatni na md, drugi na 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>

2018 Aktualizacja Bootstrap 4.0+
/ colspan = 10 /

Pulpit (większe ekrany): Tutaj wpisz opis obrazka

Mobile (mniejsze ekrany): Tutaj wpisz opis obrazka

dema starszych wersji
demo-alpha 6
demo-beta (3)

Zobacz więcej Bootstrap 4.0+ zamawianie dema

powiązane:
zamawianie kolumn w Bootstrap 4 z push / pull i col-md-12
Bootstrap 4 Zmiana kolejności kolumn

A-C-B A-B-C

 50
Author: Zim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-29 13:35:16

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;
    }
}

CodePen Link: https://codepen.io/preston206/pen/EwrXqm

 9
Author: bprdev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-19 19:24:06

Używam Bootstrap 3, więc nie wiem, czy jest łatwiejszy sposób, aby to zrobić 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>

EDIT:

Ohh... wygląda na to, że to, co napisałem powyżej, jest dokładnie A.pull-XS-right klasa w Bootstrap 4: x wystarczy dodać ją do drugiej kolumny i powinna działać idealnie.
 2
Author: Marek Kus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-15 18:26:43

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>
 0
Author: nikhil sugandh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-24 10:27:12

Ponieważ zamawianie kolumn nie działa w Bootstrap 4 beta, jak opisano w kodzie podanym w odpowiedzi powyżej, musisz użyć następującego kodu (jak wskazano w codeply 4 Flexbox order demo - linki alfa / beta, które zostały podane w odpowiedzi).

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

Zauważ jednak, że "flexbox order demo-beta" przechodzi do bazy kodowej alpha, a zmiana bazy kodowej Na Beta (i jej uruchomienie) powoduje nieprawidłowe wyświetlanie divów w jednej kolumnie-ale to wygląda jak problem z codeply od wycięcia i wklejenia kodu z codeply działa zgodnie z opisem.

 -1
Author: user3893613,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-19 03:45:21

Możesz zrobić dwa różne kontenery, jeden z mobilnym zamówieniem i ukryciem na ekranie pulpitu, drugi z zamówieniem na pulpicie i ukryciem na ekranie mobilnym

 -3
Author: MarBer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-14 14:18:57