Bir sütunu Bootstrap kullanarak duyarlı bir görünümde nasıl bölme?

Question

Ben Bootstrap v4 alfa4

kullanıyorum Şu anda var:

Div B 
Div A 
Div C 

Ben:

xs düzeni için

.row 
    .col-xs-12.col-md-8 
    div A 
    .col-xs-12.col-md-4 
    div B 
    div C 

, ben div düzeni olmak istiyorum Bunun nasıl yapılacağı veya nasıl sorulacağı hakkında hiçbir fikriniz yok. Ben bir ön uç dev değilim, bu yüzden ne çağrıldığını bilmiyorum.

HTML'yi istediğimiz gibi değiştirebiliriz.'un şu an olduğu gibi kalması gerekiyor. Bunun yerine flexbox'a ait

Answer 1

Bootstrap column ordering classes var, ama bu durumda sadece responsive float classes ..

<div class="row"> 
    <div class="col-md-4 pull-md-right"> 
     b 
    </div> 
    <div class="col-md-8"> 
     a 
    </div> 
    <div class="col-md-4"> 
     c 
    </div> 
</div> 

http://www.codeply.com/go/XL5zJELyLD

kullanabilirsiniz

Answer 2

beklediğimden sonucu elde etmek için float ve position css özelliklerinin birleşimini kullandı. Geniş genişliği 150px ve 100px olarak küçük genişlik olarak kabul ediyorum.

Working Fiddle

.container { 
 
    width: 250px; 
 
    position: relative; 
 
} 
 
.blue { 
 
    width: 150px; 
 
    height: 300px; 
 
    background: blue; 
 
    position: absolute; 
 
} 
 
.pink { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: pink; 
 
    float: right; 
 
} 
 
.green { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
    clear: right; 
 
    float: right; 
 
} 
 
@media (max-width: 450px) { 
 
    .blue { 
 
    position: relative; 
 
    } 
 
    .green, 
 
    .pink { 
 
    float: none; 
 
    width: 150px; 
 
    } 
 
}

<div class="container"> 
 

 
    <div class="pink"></div> 
 
    <div class="blue"></div> 
 
    <div class="green"></div> 
 
</div>

Answer 3

Öyleyse, sınıfları bootstrap ve bazı genel stillerden kullanarak bu kalemde yaptığım gibi yapabilirsiniz.

http://codepen.io/TunderScripts/pen/PGadpr

Html:

<div class="row"> 
    <div class="col-xs-12 col-md-4 pull-right col1"></div> 
    <div class="col-xs-12 col-md-8 pull-left col2"></div> 
    <div class="col-xs-12 col-md-4 pull-right col3"></div> 
</div> 

css

:

.col1{ 
    background: red; 
    height: 200px; 
} 
.col2{ 
    background: blue; 
    height: 600px; 
} 
.col3{ 
    background: green; 
    height: 200px; 
} 

Sen yüzen için kendi sınıfları kullanarak varsayılan davranışı değiştirebilir (pull-sol, pull-sağ) . Söz verdiğimiz gibi

Answer 4

, basit draft

HTML

<div class="row"> 
    <div class="col1">DIV A</div> 
    <div class="col2">DIV B</div> 
    <div class="col3">DIV C</div> 
</div> 

CSS açıklama gelince

.row { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    justify-content: space-between; 
    width: 400px; 
    margin: 0 auto; 
} 

.col1 { 
    width: 200px; 
    height: 400px; 
    background-color: #86a0ff; 
} 

.col2 { 
    width: 150px; 
    height: 150px; 
    background-color: #ff6cde; 
} 

.col3 { 
    margin-top: -200px; 
    margin-left: auto; 
    width: 150px; 
    height: 150px; 
    background-color: #35af6d; 
} 

@media (max-width: 768px) { 
    .row { 
    justify-content: center; 
    flex-direction: column; 
    } 

    .col1 { 
    order: 2; 
    width: 200px; 
    margin-top: 50px; 
    } 

    .col2 { 
    order: 1; 
    width: 200px; 
    } 

    .col3 { 
    order: 3; 
    width: 200px; 
    margin-top: 50px; 
    margin-left: 0; 
    } 
} 

, burada flexbox'a için büyük guide olduğunu. Örneğimin ana fikri, sipariş özelliğini kullanarak, blokların görüntülendiği sırayı işleyebilmenizdir. Flexbox kullanmanın en önemli yanı, duyarlılık gibi istenen sonuca ulaşmak için herhangi bir kütüphaneyi (Bootstrap gibi) yüklemeniz gerekmeyecektir.Ayrıca, tarayıcıların eski sürümlerini desteklemeniz gerekmediği sürece, iyi bir tarayıcı support'a da sahiptir. Umarım cevabım size yardımcı olacaktır!