Bootstrap 4.1 Blog-Post-Grid mit drei Spalten, zwei Haltepunkten und Neuordnung.

Für diesen Blog wollte ich, dass die Blog-Post-Seite drei "Spalten" hat. Warum habe ich die Wortspalten zitiert? Denn was eine Spalte auf einem großen Bildschirm ist, kann eine Zeile auf einem mobilen Gerät sein. Bootstrap verwendet Container, Zeilen und Spalten. Und natürlich kann eine Bootstrap-Spalte auf dem Bildschirm als Spalte oder Zeile dargestellt werden. Hilfe!

Bei der Gestaltung eines Layouts dürfen wir nicht an Spalten denken, sondern an Bildschirmelemente und wie wir sie auf verschiedenen Geräten auf dem Bildschirm haben wollen. Als Entwickler sitze ich den ganzen Tag hinter einem Monitor, also wollte ich drei Spalten sehen, sorry, Bildschirmelemente:

A | B | B | C

A ist der am wenigsten wichtige und kleinste Teil, dafür habe ich im Moment keinen bestimmten Inhalt im Sinn. Zunächst kann es als Abstandshalter für große Geräte verwendet werden.
B ist natürlich der wichtigste Teil der Seite, der Inhalt, der Blogbeitrag. Es ist die größte in der Breite.
C ist der nächstwichtigste Teil, der aus Suchanfragen, Tags und ausgewählten Informationen besteht. Es ist die zweitgrößte in der Breite.

Auf mobilen Geräten wollte ich, dass es so aussieht:

B
C
A

Für Geräte zwischen groß und klein wollte ich, dass es so aussieht:

B | C
A A

Wie machen wir das jetzt? Als Bootstrap-Noob suchte ich im Internet nach Copy-Paste-Lösungen, fand aber nichts Ähnliches. Zeit, mit dem Lesen zu beginnen. Bei der Recherche bekommen Sie neue Keywords, die Sie in Ihrer Suche verwenden können, und ich habe schließlich auf den Beitrag'How to Reorder Columns with Bootstrap 4 Order Classes' geklickt und alle Teile sind in Position gebracht. Erstens spricht Bootstrap über Geräte, also halten wir uns an diese Terminologie. Zweitens ist Bootstrap zuerst mobil, also sollten wir mit dem kleinsten Gerät beginnen. Dies ist sehr wichtig, um zu verstehen, wie wir die Reihenfolge der Elemente ändern können!

Wir beginnen mit den extra kleinen Geräten (xs) und kleinen Geräten (sm), dann kommen die mittleren Geräte (md) und schließlich haben wir die großen Geräte (lg) und die extra großen Geräte (xl). Ich habe Klassen elem-1-content, elem-2-information und elem-3-least-wichtig hinzugefügt, um einige Farben hinzuzufügen, damit man leicht erkennen kann, was passiert.

Für das kleinste Gerät setzen wir die Klasse auf col-12, was jede Spalte zur maximalen Breite macht und zu drei sichtbaren Zeilen führt, Inhalt, Informationen, die am wenigsten wichtig sind:

<div class="container">
    <div class="row">

        <div class="col-12 elem-1-content">
            Content
        </div>

        <div class="col-12 elem-2-information">
            Information
        </div>

        <div class="col-12 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Für das Medium Gerät setzen wir die Klasse der Inhaltsspalte auf md-9 und die Klasse der Informationsspalte auf md-3 und setzen sie in die gleiche Zeile. Die am wenigsten wichtige Spalte verwendet immer noch das Maximum von 12, eingestellt auf das kleinste Gerät, ohne dass hier etwas hinzugefügt werden muss:

<div class="container">
    <div class="row">

        <div class="col-12 col-md-9 elem-1-content">
            Content
        </div>

        <div class="col-12 col-md-3 elem-2-information">
            Information
        </div>

        <div class="col-12 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Schließlich setzen wir für das große Gerät die Klasse der Inhaltsspalte auf lg-8, die Klasse der Informationsspalte auf lg-3 und die Klasse der am wenigsten wichtigen Spalte lg-1. Jetzt müssen wir Bootstrap neu ordnen, um die Spalten an die richtigen Positionen zu bringen. Füge order-lg-1 zu der am wenigsten wichtigen Spalte hinzu, um sie an die oberste linke Position zu bringen, order-lg-12 zu der Informationsspalte, um sie an die oberste rechte Position zu bringen und order-lg-10 zu der Inhaltsspalte, um sie irgendwo dazwischen zu platzieren:

<div class="container">
    <div class="row">

        <div class="col-12 col-md-9 col-lg-8 order-lg-10 elem-1-content">
            Content
        </div>

        <div class="col-12 col-md-3 col-lg-3 order-lg-12 elem-2-information">
            Information
        </div>

        <div class="col-12 col-lg-1 order-lg-1 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Die Schritte werden im Folgenden dargestellt. Um sie zu sehen, müssen Sie sich hinter einem großen" Monitor befinden und die Größe Ihres Browsers ändern:

Links / Impressum

Bootstrap Grid system Reordering
https://getbootstrap.com/docs/4.0/layout/grid/#reordering

How to Reorder Columns with Bootstrap 4 Order Classes
https://bootstrapcreative.com/bootstrap-push-pull-column-ordering-tutorial/