Ich mache ein ansprechendes Layout mit einer oberen festen Navigationsleiste. Darunter habe ich zwei Spalten, eine für eine Seitenleiste (3) und eine für den Inhalt (9). Was auf dem Desktop so aussieht

navbar
[3] [9]

Wenn ich resizedas Handy navbarkomprimiert und ausgeblendet habe, wird die Seitenleiste wie folgt über den Inhalt gestapelt:

navbar
[3]
[9]

Ich möchte den Hauptinhalt oben haben, daher muss ich die Reihenfolge auf dem Handy folgendermaßen ändern:

navbar
[9]
[3]

Ich habe diesen Artikel gefunden , der dieselben Punkte behandelt, aber die akzeptierte Antwort wurde so bearbeitet, dass die Lösung Nein für die aktuelle Version von Bootstrap gilt.

Wie kann ich diese Spalten auf Mobilgeräten neu anordnen? Oder wie kann ich alternativ die Seitenleisten-Listengruppe in meine expandierende Navigationsleiste aufnehmen?

Hier ist mein Code:

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

Sie können die Reihenfolge der Spalten in kleineren Bildschirmen nicht ändern, aber Sie können dies in großen Bildschirmen tun.

Ändern Sie also die Reihenfolge Ihrer Spalten.

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

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

Standardmäßig wird zuerst der Hauptinhalt angezeigt.

So wird im mobilen Hauptinhalt zuerst angezeigt.

Mit col-lg-pushundcol-lg-pull wir die Spalten in großen Bildschirmen neu anordnen und die Seitenleiste links und den Hauptinhalt rechts anzeigen.

Hier Geige arbeiten .

Aktualisiert 2018

Für die ursprüngliche Frage, die auf Bootstrap 3 basiert , bestand die Lösung darin , Push-Pull zu verwenden .

In Bootstrap 4 ist es jetzt möglich , die Reihenfolge zu ändern, auch wenn die Spalten in voller Breite gestapelt sind dank der Bootstrap 4-Flexbox vertikal sind. OFC, die Push-Pull-Methode funktioniert weiterhin, aber jetzt gibt es andere Möglichkeiten, die Spaltenreihenfolge in Bootstrap 4 zu ändern, sodass Spalten mit voller Breite neu angeordnet werden können.

Methode 1 - Verwendung flex-column-reversefür xsBildschirme:

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

Methode 2 - Verwendung order-firstfür xsBildschirme:

<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 (Alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr

Original 3.x Antwort

Für die ursprüngliche Frage, die auf Bootstrap 3 basiert , bestand die Lösung darin , Push-Pull für die größeren Breiten zu verwenden, und dann zeigen die Spalten ihre natürliche Reihenfolge bei kleineren (xs) Breiten. (AB rückwärts zu 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 erklärte: " Sie können die Reihenfolge der Spalten in kleineren Bildschirmen nicht ändern, aber Sie können dies in großen Bildschirmen tun ." Dies sollte jedoch klargestellt werden, um Folgendes anzugeben: "Sie können die Reihenfolge der " gestapelten "Spalten in voller Breite in Bootstrap 3 nicht ändern .

Die Antworten hier funktionieren nur für 2 Zellen, aber sobald diese Spalten mehr enthalten, kann dies zu einer etwas höheren Komplexität führen. Ich glaube, ich habe eine verallgemeinerte Lösung für eine beliebige Anzahl von Zellen in mehreren Spalten gefunden.

Tore

Holen Sie sich eine vertikale Folge von Tags auf Mobilgeräten, um sich in der Reihenfolge anzuordnen, die das Design auf dem Tablet / Desktop erfordert. In diesem konkreten Beispiel muss ein Tag früher als normalerweise und ein anderes später als normalerweise in den Flow eintreten.

Handy, Mobiltelefon

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

Tablet +

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

Die Überschrift muss also direkt auf Tablet + gemischt werden, und technisch gesehen auch absteigend - sie befindet sich über dem Beschriftungs-Tag, das auf dem Handy davor steht. Sie werden gleich sehen, dass 4 Untertitel ebenfalls in Schwierigkeiten sind.

Nehmen wir an, jede Zelle kann unterschiedlich hoch sein und muss mit der nächsten Zelle von oben nach unten bündig sein (um schwache Tricks wie eine Tabelle auszuschließen).

Wie bei allen Bootstrap Grid-Problemen besteht Schritt 1 darin, zu erkennen, dass der HTML-Code auf der Seite in mobiler Reihenfolge (1 2 3 4 5) vorliegen muss. Bestimmen Sie dann, wie Sie Tablet / Desktop dazu bringen, sich auf diese Weise neu zu ordnen - idealerweise ohne Javascript.

Die Lösung zu erhalten , 1 headlineund 3 qtyauf der rechten Seite nicht links zu sitzen , ist einfach gesetzt , sie beide pull-right. Dies gilt für CSS float: right, dh sie finden den ersten offenen Bereich, den sie rechts finden. Sie können sich vorstellen, dass der CSS-Prozessor des Browsers in der folgenden Reihenfolge arbeitet: 1 passt in die rechte obere Ecke. 2 ist die nächste und ist regulär ( float: left), also geht es zur oberen linken Ecke. Dann 3, was float: rightso ist, dass es unter 1 springt.

Aber diese Lösung war nicht genug für 4 caption; weil die rechten 2 Zellen 2 imagelinks so kurz sind, sind sie tendenziell länger als die beiden zusammen. Bootstrap Grid ist ein besserer Schwimmer Hack Bedeutung 4 caption ist float: left. Mit 2 imageso viel Platz auf der linken Seite,4 caption versucht in den nächsten verfügbaren Raum passen - oft die rechte Spalte, nicht der linken Seite , wo wir es wollten.

Die Lösung hier (und allgemeiner für jedes Problem wie dieses) bestand darin, ein auf Mobilgeräten verstecktes Hack-Tag hinzuzufügen, das auf Tablet + vorhanden ist, um Untertitel herauszuschieben, das dann mit einem negativen Rand verdeckt wird - wie folgt:

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

Die allgemeine Lösung besteht darin, Hack-Tags hinzuzufügen, die auf Mobilgeräten verschwinden können. Auf Tablet + ermöglichen die Hack-Tags, dass angezeigte Tags früher oder später im Flow angezeigt werden, und werden dann nach oben oder unten gezogen, um diese Hack-Tags zu verdecken.

Hinweis: Ich habe für das einfache Beispiel in der verknüpften jsfiddle feste Höhen verwendet, aber der tatsächliche Inhalt der Website, an dem ich gearbeitet habe, variiert in der Höhe in allen 5 Tags. Es wird ordnungsgemäß mit relativ großer Abweichung in den Tag-Höhen gerendert, insbesondere in Bild und Bild.

Hinweis 2: Abhängig von Ihrem Layout haben Sie möglicherweise eine ausreichend konsistente Spaltenreihenfolge auf Tablet + (oder größeren Auflösungen), sodass Sie die Verwendung von Hack-Tags vermeiden können, indem Sie margin-bottomstattdessen Folgendes verwenden:

Hinweis 3: Dies verwendet Bootstrap 3. Bootstrap 4 verwendet einen anderen Rastersatz und funktioniert mit diesen Beispielen nicht.

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

Oktober 2017

Ich möchte eine weitere Bootstrap 4-Lösung hinzufügen. Eine, die für mich funktioniert hat.

Die CSS-Eigenschaft "Order" kann in Kombination mit einer Medienabfrage verwendet werden, um Spalten neu zu ordnen, wenn sie in kleineren Bildschirmen gestapelt werden.

Etwas wie das:

@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

Wenn Sie die Bildschirmgröße anpassen, werden die Spalten in einer anderen Reihenfolge gestapelt.

Ich werde dies mit der Frage des Originalplakats verknüpfen. Mit CSS können die Navigationsleiste, die Seitenleiste und der Inhalt als Ziel ausgewählt und anschließend die in einer Medienabfrage angewendeten Reihenfolgeeigenschaften festgelegt werden.

Wenn Sie in Bootstrap 4 Folgendes tun möchten:

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

Sie müssen die Reihenfolge von B und dann von C umkehren und dann order-{breakpoint}-firstauf B anwenden . Wenden Sie zwei verschiedene Einstellungen an, eine, mit der sie dieselben Spalten verwenden, und eine, mit der sie die volle Breite der 12 Spalten annehmen:

• Kleinere Bildschirme: 12 Spalten bis B und 12 Spalten bis C.

• Größere Bildschirme: 12 Spalten zwischen der Summe ( B + C = 12)

So was

<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

Dies ist mit jQuery mit insertAfter () oder insertBefore () recht einfach.

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

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

So einfach

Wenn Sie eine Bedingung für mobile Geräte festlegen möchten, können Sie dies so gestalten

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

Beispiel https://jsfiddle.net/w9n27k23/

Ab der mobilen Version können Sie meistens das erreichen, was Sie wollen.

Beispiele hier:

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>