Tworzę responsywny układ z górnym stałym paskiem nawigacyjnym. Poniżej mam dwie kolumny, jedną dla paska bocznego (3) i jedną dla treści (9). Który na pulpicie wygląda tak

pasek nawigacyjny
[3] [9]

Kiedy I resizeto mobile navbarjest skompresowany i ukryty, to pasek boczny jest ułożony na górze zawartości, w następujący sposób:

pasek nawigacyjny
[3]
[9]

Chciałbym, aby główna treść była u góry, dlatego muszę zmienić kolejność na urządzeniach mobilnych:

pasek nawigacyjny
[9]
[3]

Znalazłem ten artykuł, który dotyczy tych samych punktów, ale zaakceptowana odpowiedź została zredagowana, aby powiedzieć, że rozwiązanie nie dotyczy bieżącej wersji Bootstrap.

Jak mogę zmienić kolejność tych kolumn na urządzeniach mobilnych? Lub alternatywnie, w jaki sposób mogę przenieść grupę list bocznych do rozwijanego paska nawigacyjnego?

Oto mój kod:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

Nie można zmienić kolejności kolumn na mniejszych ekranach, ale można to zrobić na dużych ekranach.

Zmień więc kolejność kolumn.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

Domyślnie wyświetla najpierw główną treść.

Tak więc w telefonie komórkowym wyświetlana jest główna zawartość.

Za pomocą col-lg-pushi col-lg-pullmożemy zmienić kolejność kolumn na dużych ekranach i wyświetlić pasek boczny po lewej stronie, a główną zawartość po prawej stronie.

Pracuję tutaj .

Zaktualizowano 2018

W przypadku pierwotnego pytania opartego na Bootstrap 3 rozwiązaniem było użycie push-pull .

W Bootstrap 4 możliwa jest teraz zmiana kolejności, nawet gdy kolumny są ułożone pionowo na całej szerokości , dzięki Flexbox Bootstrap 4. OFC, metoda push pull będzie nadal działać, ale teraz istnieją inne sposoby zmiany kolejności kolumn w Bootstrap 4, umożliwiając ponowne zamówienie kolumn o pełnej szerokości.

Metoda 1 - Użyj flex-column-reversedla xsekranó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 order-firstdla xsekranów:

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

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

Oryginalna odpowiedź 3.x

W przypadku pierwotnego pytania opartego na Bootstrap 3 rozwiązaniem było użycie push-pull dla większych szerokości, a następnie kolumny pokażą ich naturalną kolejność na mniejszych (xs) szerokościach. (AB odwrotnie do BA).

<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ć na dużych ekranach ”. Jednak należy to wyjaśnić, stwierdzając: „Nie można zmienić kolejności „ stosowych ”kolumn o pełnej szerokości ..” w Bootstrap 3.

Odpowiedzi tutaj działają tylko dla 2 komórek, ale gdy tylko te kolumny będą zawierały więcej, 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.

Cele

Uzyskaj pionową sekwencję tagów na urządzeniu mobilnym, aby ułożyć je w dowolnej kolejności, jakiej wymaga projekt na tablecie / komputerze. W tym konkretnym przykładzie jeden tag musi wejść w przepływ wcześniej niż zwykle, a drugi później niż zwykle.

mobilny

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

Tablet +

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

Nagłówek musi więc zostać przetasowany bezpośrednio na tablecie + i technicznie tak samo, jak desc - znajduje się nad tagiem podpisu, który poprzedza go na telefonie komórkowym. Za chwilę zobaczysz, że 4 podpisy też mają kłopoty.

Załóżmy, że każda komórka może mieć różną wysokość i musi być wyrównana od góry do dołu w następnej komórce (wykluczając słabe sztuczki jak stół).

Podobnie jak w przypadku wszystkich problemów z siecią Bootstrap, krok 1 polega na uświadomieniu sobie, że HTML musi być w kolejności mobilnej, 1 2 3 4 5, na stronie. Następnie określ, w jaki sposób zmusić tablet / pulpit do zmiany kolejności w ten sposób - najlepiej bez Javascript.

Rozwiązaniem, aby dostać się 1 headlinei 3 qtyusiąść po prawej, a nie po lewej, jest po prostu ustawić je oba pull-right. Dotyczy to CSS float: right, co oznacza, że ​​znajdują pierwszą otwartą przestrzeń, którą zmieszczą po prawej stronie. Możesz pomyś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 zwykły ( float: left), więc przechodzi do lewego górnego rogu. Następnie 3, czyli float: rightprzeskakuje pod 1.

Ale to rozwiązanie nie wystarczyło 4 caption; ponieważ prawe 2 komórki są tak krótkie 2 imagepo lewej stronie, zwykle są dłuższe niż oba razem. Bootstrap Siatka jest uwielbiony pływak hack, sens 4 caption jest float: left. Z 2 imagezajmując tak dużo miejsca na lewo,4 caption próbuje zmieścić się w następnej dostępnej przestrzeni - często w prawej kolumnie, a nie w lewo, gdzie chcieliśmy.

Rozwiązaniem tutaj (i bardziej ogólnie dla każdego takiego problemu) było dodanie tagu hacka, ukrytego na telefonie komórkowym, który istnieje na tablecie + w celu wypchnięcia podpisu, który następnie zostaje zakryty przez ujemny margines - tak:

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

Uogólnione rozwiązanie polega na dodaniu tagów hakerskich, które mogą zniknąć na urządzeniach mobilnych. Na tablecie + tagi hakerskie pozwalają, aby wyświetlane tagi pojawiały się wcześniej lub później w przepływie, a następnie zostały pociągnięte w górę lub w dół, aby zatuszować te tagi hakerskie.

Uwaga: Użyłem stałych wysokości dla prostego przykładu w połączonym jsfiddle, ale rzeczywista zawartość witryny, nad którą pracowałem, ma różną wysokość we wszystkich 5 tagach. Odwzorowuje się poprawnie przy stosunkowo dużej różnicy wysokości znaczników, szczególnie obrazu i opisu.

Uwaga 2: W zależności od układu możesz mieć wystarczająco spójną kolejność kolumn na tablecie + (lub w wyższych rozdzielczościach), aby uniknąć używania tagów hakerskich, używając margin-bottomzamiast tego:

Uwaga 3: Używa Bootstrap 3. Bootstrap 4 używa innego zestawu siatek i nie działa z tymi przykładami.

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

Październik 2017 r

Chciałbym dodać kolejne rozwiązanie Bootstrap 4. Ten, który pracował dla mnie.

Właściwość CSS „Order” w połączeniu z zapytaniem o media może służyć do zmiany kolejności kolumn, gdy zostaną one ułożone na mniejszych ekranach.

Coś takiego:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

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

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

Zwiążę to z pytaniem oryginalnego plakatu. Za pomocą CSS można kierować pasek nawigacyjny, pasek boczny i treść, a następnie porządkować właściwości stosowane w zapytaniu o media.

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

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

Trzeba odwrócić kolejność B potem C , a następnie zastosować order-{breakpoint}-firstdo B . I zastosuj dwa różne ustawienia, jedno, które sprawi, że będą miały te same kolumny, a drugie, że będą miały pełną szerokość 12 kolumn:

• Mniejsze ekrany: 12 kol. Do B i 12 kol. Do C

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

Lubię to

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

Próbny: https://codepen.io/anon/pen/wXLGKa

Jest to dość łatwe dzięki jQuery za pomocą insertAfter () lub insertBefore ().

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

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

Tak proste

jeśli chcesz ustawić warunek dla urządzeń mobilnych, możesz to zrobić w ten sposób

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

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

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

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>