如何使用Bootstrap在響應視圖中分割列？

Question

我使用引導V4的α4

目前我有：

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

對於XS佈局，我想在div爲了：

Div B 
Div A 
Div C 

我有不知道如何做到這一點或如何甚至詢問它。我不是前端開發人員，所以我不知道要調用什麼東西。

我們可以將HTML更改爲任何我們想要的。它確實不是必須保持現在的樣子。

Answer 1

引導確實有column ordering classes，但在這種情況下，你可以簡單地使用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

Answer 2

相反的Flexbox的，我用的float和position CSS屬性的組合，以獲得預期的結果。假設寬度爲150px，寬度爲100px。

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

所以使用自舉和一些一般風格的類，你可以達到像我在這支筆中做的那樣。

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

您可以使用自己的類彩車更改默認行爲（拉左，右拉） 。

Answer 4

正如所承諾的，一個簡單的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

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

至於解釋，這裏是一個偉大的guide了flexbox。在我的例子中，主要思想是通過使用順序屬性可以控制塊顯示的順序。使用flexbox的主要優點是您不需要加載任何庫（如Bootstrap）以實現所需的結果，例如響應。它也有一個很好的瀏覽器support，除非你需要支持舊版本的瀏覽器。我希望我的回答對你有幫助！