Bootstrap GRID系統可能嗎？

Question

美好的一天！ 我想弄清楚下面的場景是否可行。

當它在桌面/筆記本電腦上時，布局應該是這樣的

<div class="col-md-3">
sidebar
</div>

<div class="col-md-9">
article
</div>

當它在小屏幕上時，兩個div將切換，並且必須像這樣

<div class="col-md-9">
sidebar
</div>

<div class="col-md-3">
article
</div>

您的回答表示贊賞！

Answer 1

您可以！ 通過向<div>添加多個網格類，您可以為每個斷點定義列的大小。 在你的情況下，這可能是側col-xs-9 col-md-3和文章中的col-xs-3 col-md-9 。 這將使側欄占據12列中的9列用於xs和sm斷點大小，12列中的3列用於md和lg斷點大小。

在全屏中打開以下示例以使用斷點。

 .box { border: 1px solid #c66; background-color: #f99; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-xs-9 col-md-3 box"> sidebar </div> <div class="col-xs-3 col-md-9 box"> article </div> 

---

從您的評論中我看到您希望文章位於側邊欄的小屏幕上。 這有點棘手。 你需要做三件事：

1. 首先從小屏幕布局開始開發移動設備。 您需要更改側欄和文章<div>的順序。

2. 確保在小屏幕上，使用col-xs-12 ，側欄和文章占據了12列中的12列。 這將使側邊欄被推到文章下方。

3. 請注意，在桌面屏幕上，側邊欄和文章確實顯示在彼此旁邊，但側邊欄位於右側而不是左側。 你可以通過添加col-md-pull-9向左拉邊欄來改變這一點（你需要向左拉9列，文章占用的列數）並將文章推到右邊添加col-md-push-3 （你需要向右推3列，側欄占用的列數）。

請參閱更新的示例：

 .box { border: 1px solid #c66; background-color: #f99; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-xs-12 col-md-9 col-md-push-3 box"> article </div> <div class="col-xs-12 col-md-3 col-md-pull-9 box"> sidebar </div> 

Answer 2

bootstrap的前綴很少，無法指定寬度類： -xs- / -sm- / -md- / -lg- （從最小到最大寬度）。

所以從-md-和更大的屏幕你有col-md-3和col-md-9 。 要在pre- -md-類中以相反順序獲取它們，可以指定-xs-或-sm-前綴。

所以要反轉你的類，只需寫：

<div class="col-md-9 col-xs-3"></div>
<div class="col-md-3 col-xs-9"></div>

Answer 3

嘗試這個：

<div class="col-sm-9 col-md-3">
 sidebar
</div>

<div class="col-sm-3 col-md-9">
 article
</div>

這將在eXtraSmall（xs）和SMall（sm）中顯示9個塊中的側邊欄，在MeDium（md）和LarGe（lg）中顯示3個塊中的側邊欄，反之亦然。