Zamów kolumny przez Bootstrap4

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.

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

Mobilne (mniejsze ekrany):

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+

ACB ABC

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

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>

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.

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.

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