webentwicklung-frage-antwort-db.com.de

Wie ändere ich die Spaltenreihenfolge von Bootstrap 3 im mobilen Layout?

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

navbar
[3] [9]

Wenn ich resize zum Mobilen von navbar komprimiert und ausgeblendet habe, wird die Seitenleiste wie folgt über den Inhalt gestapelt:

navbar
[3]
[9]

Ich möchte den Hauptinhalt oben sehen, 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 dahingehend 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 alternativ, wie kann ich die Seitenleistenlistengruppe in meine expandierende Navigationsleiste übernehmen?

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

Sie können die Reihenfolge der Spalten in kleineren Bildschirmen nicht ändern, dies ist jedoch in großen Bildschirmen möglich.

Ä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-Push und col-lg-pull können wir die Spalten in großen Bildschirmen neu anordnen und die Seitenleiste links und den Hauptinhalt rechts anzeigen.

Arbeiten Geige hier .

455

Aktualisiert 2018

Für die ursprüngliche Frage basierend auf Bootstrap lautete die Lösung Push-Pull verwenden.

In Bootstrap 4 ist es jetzt möglich , die Reihenfolge zu ändern, auch wenn die Spalten in voller Breite gestapelt sind vertikal, dank Bootstrap 4 Flexbox. 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 - Verwenden Sie flex-column-reverse für xs Bildschirme:

<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 - Verwenden Sie order-first für xs Bildschirme:

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

Für die ursprüngliche Frage basierend auf Bootstrap lautete die Lösung Push-Pull für die größeren Breiten und dann Die Spalten zeigen die natürliche Reihenfolge bei kleineren (xs) Breiten. (A-B rückwärts zu 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 sagte, " Sie können die Reihenfolge der Spalten in kleineren Bildschirmen nicht ändern, aber Sie können das in großen Bildschirmen tun ". Dies sollte jedoch klargestellt werden, um Folgendes anzugeben: "Sie können die Reihenfolge von " gestapelten "Spalten mit voller Breite .." in Bootstrap 3.

60
Zim

Die Antworten funktionieren hier nur für 2 Zellen, aber sobald diese Spalten mehr enthalten, kann dies zu einer etwas höheren Komplexität führen. Ich denke, 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 Ihrem Handy, um sich in der Reihenfolge anzuordnen, in der das Design auf Ihrem Tablet/Desktop dies erfordert. In diesem konkreten Beispiel muss ein Tag früher als normal und ein anderes später als normal 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 dem Tablet + gemischt werden, und technisch gesehen auch desc - sie befindet sich über dem Untertitel-Tag, der auf dem Handy davor steht. Sie werden gleich sehen, dass 4 caption ebenfalls in Schwierigkeiten ist.

Angenommen, jede Zelle kann in der Höhe variieren und muss mit der nächsten Zelle von oben nach unten ausgerichtet sein (schwache Tricks wie bei einer Tabelle werden ausgeschlossen).

Wie bei allen Bootstrap Grid-Problemen besteht Schritt 1 darin, zu erkennen, dass sich das HTML in der mobilen Reihenfolge 1 2 3 4 5 auf der Seite befinden muss. Stellen Sie dann fest, wie Tablet/Desktop sich auf diese Weise neu anordnen kann - idealerweise ohne Javascript.

Die Lösung, um 1 headline und 3 qty nach rechts und nicht nach links zu setzen, besteht darin, einfach beide pull-right zu setzen. Dies gilt für CSS float: right, was bedeutet, dass sie den ersten freien Platz finden, der rechts passt. Sie können sich vorstellen, dass der CSS-Prozessor des Browsers in der folgenden Reihenfolge funktioniert: 1 passt in die rechte obere Ecke. 2 ist der nächste und ist normal (float: left), also geht es zur oberen linken Ecke. Dann 3, was float: right ist, so dass es unter 1 springt.

Aber diese Lösung war nicht genug für 4 caption; weil die rechten 2 Zellen so kurz sind, ist 2 image auf der linken Seite tendenziell länger als die beiden zusammen. Bootstrap Grid ist ein verherrlichter Float-Hack, was bedeutet, dass 4 captionfloat: left ist. Da 2 image so viel Platz auf der linken Seite einnimmt, versucht 4 caption in den nächsten verfügbaren Platz zu passen - oft in die rechte Spalte, nicht in die linke, wo wir es wollten.

Die Lösung hier (und allgemeiner für jedes Problem wie dieses) bestand darin, ein Hack-Tag, das auf dem Tablet + versteckt ist, zu Push-Caption-Out hinzuzufügen, das dann durch einen negativen Rand verdeckt wird.

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

Daher besteht die allgemeine Lösung darin, Hack-Tags hinzuzufügen, die auf Mobilgeräten verschwinden können. Auf dem Tablet + ermöglichen die Hack-Tags, dass angezeigte Tags früher oder später im Ablauf 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 Site, an dem ich gearbeitet habe, variiert in der Höhe Insgesamt 5 Tags. Es wird korrekt wiedergegeben, wobei die Etikettenhöhen relativ unterschiedlich sind, insbesondere Image und Desc.

Hinweis 2: Abhängig von Ihrem Layout verfügen Sie möglicherweise über eine ausreichend konsistente Spaltenreihenfolge für Tablets + (oder höhere Auflösungen), sodass Sie die Verwendung von Hack-Tags vermeiden können Verwenden Sie stattdessen margin-bottom wie folgt:

Hinweis 3: Dies verwendet Bootstrap 3. Bootstrap 4 verwendet einen anderen Rastersatz und wird dies nicht tun arbeite mit diesen Beispielen.

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

27
Chris Moschini

Oktober 2017

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

Die CSS-Eigenschaft "Order" kann in Kombination mit einer Medienabfrage verwendet werden, um Spalten neu anzuordnen, 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

Passen Sie die Bildschirmgröße an und Sie werden sehen, dass die Spalten in einer anderen Reihenfolge gestapelt werden.

Ich werde dies mit der Frage des ursprünglichen Posters verknüpfen. Mit CSS können die Navigationsleiste, die Seitenleiste und der Inhalt gezielt bearbeitet und anschließend die Eigenschaften einer Medienabfrage zugewiesen werden.

5
bprdev

In Bootstrap 4, wenn Sie so etwas tun möchten:

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

Sie müssen die Reihenfolge von B und C umkehren und dann order-{breakpoint}-first auf B anwenden. Wenden Sie zwei verschiedene Einstellungen an, mit denen die gleichen Spalten und mit denen die gesamte Breite der 12 Spalten verwendet werden:

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

  • Größere Bildschirme: 12 Spalten zwischen deren 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

4
ajax333221

Ab der mobilen Version können Sie die meiste Zeit 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>
1
user2866893