Wie können Divs in einer anderen Reihenfolge angezeigt werden, abhängig von der Bildschirmgröße in Bootstrap 3?

Question

Ich habe ein Bootstrap zwei Spaltenlayout, das auf schmalen Bildschirmen zu einem zusammenfaltet.

Bad ASCII art:

+-------------------+-------------------+ 
| Div A   | Div B1   | 
|     +-------------------+ 
|     | Div B2   | 
|     +-------------------+ 
|     | Div B3   | 
+-------------------+-------------------+ 

zusammenzubrechen

+-------------------| 
| Div B1   | 
+-------------------+ 
| Div B2   | 
+-------------------+ 
| Div B3   | 
+-------------------+ 
| Div A   | 
|     | 
|     | 
|     | 
|     | 
+-------------------+ 

A hat Klasse col-md-6, B1-B3 sind in einem div B mit Klasse col-md enthalten -6 col-md-push-6. Das funktioniert ganz gut, aber das Layout wäre noch schöner als das

+-------------------| 
| Div B1   | 
+-------------------+ 
| Div A   | 
|     | 
|     | 
|     | 
|     | 
+-------------------+ 
| Div B2   | 
+-------------------+ 
| Div B3   | 
+-------------------+ 

Ist das mit angemessenen Mengen an Code erreichbar?

Answer 1

Es macht mehr Sinn, wenn Sie es über das Denken entwerfen, was wie auf mobilen ersten aussehen wird. Ein einfaches Pull-rechts und Pull-links und die richtigen Klassen und Architektur und Sie haben keine Medien-Hacks zu verwenden.

Haftungsausschluss: Seien Sie vorsichtig, da der einzige Nachteil ist die Tab-Reihenfolge zu verlieren A1- B1- B2- B3;)

siehe Code

<div class="container"> 
    <div class="col-xs-12 col-md-6 pull-right"> 
     <div class="box">B1</div> 
    </div> 
    <div class="col-xs-12 col-md-6 pull-left"> 
     <div class="box a1">A1</div> 
    </div> 
    <div class="col-xs-12 col-md-6"> 
     <div class="box">B2</div> 
    </div> 
    <div class="col-xs-12 col-md-6"> 
     <div class="box">B3</div> 
    </div> 
</div> 

CSS (dies nur für Demo Verschönerungs und Unterscheidung von Boxen. Sie pflegen müssen diese mit Ausnahme des Reset-no-padding)

.container div{ 
    padding:0; 
} 
.box{ 
    background:red; 
    height:40px; 
    color:#fff; 
    padding:10px; 
    text-align:center; 
    border:1px solid #111; 
} 
.box.a1{ 
    background:blue; 
    height:120px; 
} 

die demo

anzeigen 0

Answer 2

Verwenden Sie eine Medienabfrage, um das neue Layout beim Zusammenklappen anzugeben. Sie können alle Informationen, die Sie hier auf Medienanfragen benötigen: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Barebones Beispiel:

@media (max-width: 700px) { 
    collapsed layout here 
}