Odpowiedzi tutaj działają tylko dla 2 komórek, ale jak tylko te kolumny mają więcej w sobie, może to prowadzić do nieco większej złożoności. Myślę, że znalazłem uogólnione rozwiązanie dla dowolnej liczby komórek w wielu kolumnach.

Bramki

Uzyskaj pionową sekwencję znaczników na telefonie komórkowym, aby uporządkować się w dowolnej kolejności na tablecie/komputerze. W tym konkretnym przykładzie jeden znacznik musi wejść do przepływu wcześniej niż normalnie, a inny później niż zwykle would.

Mobile

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

Tablet+

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

Więc nagłówek musi przetasować prawo na tablecie+, i technicznie, tak samo desc-znajduje się nad znacznikiem podpisu, który poprzedza go na telefonie komórkowym. Zobaczysz za chwilę 4 podpis też ma kłopoty.

Załóżmy, że każda komórka może różnić się wysokością i musi być wyrównana od góry do dołu z następną komórką(wykluczając słabe sztuczki, takie jak tabela).

Podobnie jak w przypadku wszystkich problemów z siatką Bootstrap Krok 1 to realizacja HTML musi być w komórce-kolejność, 1 2 3 4 5, na stronie. Następnie określ, jak sprawić, aby tablet / komputer zmienił kolejność w ten sposób - najlepiej bez Javascript.

Rozwiązaniem, aby 1 headline i 3 qty usiąść w prawo, a nie w lewo, jest po prostu ustawić je obie pull-right. Dotyczy to CSS float: right, co oznacza, że znajdują pierwszą otwartą przestrzeń, która zmieści się po prawej stronie. Możesz myśleć o procesorze CSS przeglądarki działającym w następującej kolejności: 1 pasuje do prawego górnego rogu. 2 jest następny i jest regularny (float: left), więc idzie do lewego górnego rogu. Następnie 3, czyli float: right, więc przeskakuje Pod 1.

Ale To rozwiązanie nie wystarczyło dla 4 caption; ponieważ prawa 2 komórki są tak krótkie 2 image po lewej wydają się być dłuższe niż obie razem wzięte. Bootstrap Grid jest tzw. float hack, czyli 4 caption jest float: left. Ponieważ 2 image zajmuje tyle miejsca po lewej stronie, 4 caption próbuje zmieścić się w następnej dostępnej przestrzeni-często w prawej kolumnie, a nie w lewej, gdzie chcieliśmy to.

Rozwiązaniem tutaj (i bardziej ogólnie dla każdego problemu jak ten) było dodanie znacznika hack, ukrytego na telefonie komórkowym, który istnieje na tablecie+, aby wypchnąć podpis, który następnie zostaje zakryty przez ujemny margines-jak to:

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][6 desc ^^^]
[         ][          ]

Http://jsfiddle.net/b9chris/52VtD/16633/

HTML:

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS:

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

Więc uogólnionym rozwiązaniem jest dodanie tagów hack, które mogą zniknąć na telefonie komórkowym. Na tablecie+ tagi hack pozwalają wyświetlane tagi do pojawiają się wcześniej lub później w przepływie, a następnie zostać wyciągnięty w górę lub w dół, aby ukryć te tagi hack.

Uwaga: użyłem stałych wysokości dla prostego przykładu w linkowanym jsfiddle, ale rzeczywista zawartość strony, nad którą pracowałem, różni się wysokością we wszystkich tagach 5. Renderuje poprawnie ze stosunkowo dużą wariancją wysokości znaczników, zwłaszcza obrazu i desc.

Uwaga 2: W zależności od układu możesz mieć wystarczająco spójną kolejność kolumn na tablecie+ (lub większe rozdzielczości), że można uniknąć używania tagów hakerskich, używając zamiast tego margin-bottom, Jak tak:

Uwaga 3: To używa Bootstrap 3. Bootstrap 4 używa innego zestawu siatek i nie będzie działać z tymi przykładami.

Http://jsfiddle.net/b9chris/52VtD/16632/

Aktualizacja 2018

Dla oryginalnego pytania opartego na Bootstrap 3, rozwiązaniem było użycie push-pull dla większych szerokości, a następnie kolumny pokażą ich naturalny porządek na mniejszych (XS) szerokościach. (A-B odwróć do B-a).

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel

@emre stwierdził, " nie można zmienić kolejności kolumn na mniejszych ekranach, ale można to zrobić w dużych ekrany "

Należy jednak wyjaśnić, aby stwierdzić: "nie można zmienić kolejności pełna szerokość " ułożone " kolumny .."w Bootstrap 3.

Jednak w Bootstrap 4 jest teraz możliwe, Aby zmienić kolejność, nawet jeśli kolumny są ułożone na całej szerokości pionowo, dzięki Bootstrap 4 flexbox. OFC, metoda push pull nadal będzie działać, ale teraz są inne sposoby zmiany kolejności kolumn w Bootstrap 4, dzięki czemu możliwość ponownego zamówienia kolumn o pełnej szerokości.

Metoda 1-Użyj flex-column-reverse dla xs ekranów:

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

Metoda 2-Użyj flex-first do xs ekranów (lub order-* w 4.0.0):

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 flex-first flex-md-unordered">
        main
    </div>
</div>

Bootstrap 4 (Alfa 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.0.0: https://www.codeply.com/go/e0v77yGtcr

Październik 2017

Chciałbym dodać kolejne rozwiązanie Bootstrap 4. Taki, który zadziałał na mnie.

Właściwość CSS "Order", w połączeniu z zapytaniem o media, może być używana do ponownego porządkowania kolumn, gdy zostaną ułożone w stos na mniejszych ekranach.

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

Dostosuj rozmiar ekranu, a kolumny zostaną ułożone w innej kolejności.

I ' ll tie to jest pytanie z oryginalnego plakatu. Za pomocą CSS można kierować na pasek nawigacyjny, pasek boczny i zawartość, a następnie zastosować właściwości order w zapytaniu o media.

Zaczynając od wersji mobilnej, możesz osiągnąć to, czego chcesz, przez większość czasu.

Przykłady tutaj:

Http://jsbin.com/wulexiq/edit?html, css, output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>

W Bootstrap 4 , jeśli chcesz zrobić coś takiego:

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

Należy odwrócić kolejność B Następnie C następnie zastosować order-{breakpoint}-first do B . I Zastosuj dwa różne ustawienia, jedno, które sprawi, że będą miały te same kolory, a drugie, które sprawi, że będą miały pełną szerokość 12 kolorów: {]}

• Mniejsze ekrany: 12 kolorów do B i 12 kolorów do C

• Większe ekrany: 12 KOLs między ich sumą (B + C = 12)

Like this

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

Demo: https://codepen.io/anon/pen/wXLGKa

Jest to dość proste z jQuery używając insertAfter () lub insertBefore ().

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

That simple

Jeśli chcesz ustawić warunek o dla urządzeń mobilnych możesz zrobić to tak

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

Przykład https://jsfiddle.net/w9n27k23/