Wie kann ich Bootstrap-Spalten für Desktop- und Mobilansichten unterschiedlich neu anordnen?

Stapeln von Bootstrap-Spalten in unterschiedlicher Reihenfolge auf Mobilgeräten

In Bootstrap 4 kann es etwas schwierig sein, die Anordnung der Spalten anzupassen, wenn zwischen Desktop- und Mobilansichten gewechselt wird. Gehen wir ein bestimmtes Szenario an: Sie haben zwei Spalten und eine verschachtelte Zeile in der rechten Spalte. Ihr Ziel besteht darin, das Layout so zu gestalten, dass es wie folgt angezeigt wird:

Desktop-Version:

--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

Mobile Version (in der Reihenfolge gestapelt):

--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

Verwenden von Floats und Deaktivieren Flexbox

Das Standard-Flexbox-Layout in Bootstrap 4 gewährleistet die gleiche Höhe der Spalten. Um das gewünschte Desktop-Layout zu erreichen, können Sie Flexbox für große Bildschirme deaktivieren und stattdessen Floats verwenden:

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

Flexbox Wrapping Hack verwenden

Alternativ können Sie einen Flexbox Wrapping Hack verwenden, der w verwendet -auto:

<div class="container">
    <div class="row">
         <div class="col-lg-8 order-1">
            <div class="card card-body">2</div>
        </div>
        <div class="col-lg-4 order-0">
            <div class="card card-body w-auto">1</div>
        </div>
        <div class="col-lg-4 order-1">
            <div class="card card-body w-auto">3</div>
        </div>
    </div>
</div>

Überlegungen

Beide Ansätze haben ihre eigenen Vorteile und Nachteile. Die Float-Methode ist einfacher, kann jedoch Probleme mit der Ausrichtung und Reaktionsfähigkeit verursachen. Der Wrapping-Hack bietet eine bessere Reaktionsfähigkeit, erfordert jedoch komplexeres CSS.

Zusätzliche Ressourcen

• [Wie behebe ich eine unerwartete Spaltenreihenfolge in Bootstrap 4?](...)
• [Bootstrap Responsive Columns Height](...)
• B-A-C -> A-B-C

Das obige ist der detaillierte Inhalt vonWie kann ich Bootstrap-Spalten für Desktop- und Mobilansichten unterschiedlich neu anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!