Bootstrap 3'teki ekran boyutuna bağlı olarak div'ler farklı bir sırada nasıl görüntülenir?

Question

Dar ekranlarda birine bastıran bir Bootstrap iki sütun düzenim var.

kötü ASCII sanat:

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

çöken

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

A sınıfı col-md bir div B içerdiği sınıf col-md-6, B1-B3 sahip -6 col-md-push-6. Bu gayet güzel çalışıyor, ama düzen

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

olarak daha güzel olurdu kod makul miktarda olduğu başarılabilir mi?

Answer 1

mobil cihazlardan birinci üzerinde benzemeye ne olup bittiğini düşünmeye tasarlayın daha mantıklı Sen burada medya sorgularında gereken tüm bilgileri bulabilirsiniz. Basit bir pull-right ve pull-left ve doğru sınıflar ve mimarlık ve hiç kullanmak için hiçbir medya hack var.

Yasal Uyarı: Bunun tek dezavantajı sekme sırasını kaybediyor olarak dikkatli olun A1- B1-B2-B3;

(kod

<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 bakın bu sadece demo içindir) güzelleştirilmesi ve kutuların ayrım. Sen alışkanlık

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

demo

bakınız) no-dolgu sıfırlama dışında bu ihtiyaç 0

Answer 2

Yeni düzenini, daraltıldığında belirtmek için bir medya sorgusu kullanın. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Barebone örnek:

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