引導中的堆疊順序

我在引導中存在堆疊順序的問題。我意識到已經提出了類似的問題，並且應該使用它的推拉。但我無法讓它工作。引導中的堆疊順序

這是使用的代碼IM：

<div class="row"> 
 
    \t <div class="col-xs-12 col-sm-6"> a </div> 
 
    \t <div class="col-xs-12"> b </div> 
 
    \t <div class="col-xs-12 col-sm-6"> c </div> 
 
</div>

我要的是A，B和C是下海誓山盟，才能在移動視圖，但在桌面視圖和c應該在他們下面的分隔符和b旁邊。

一個
b
Ç

一個C
b

來源

2014-09-22 Kalle Henningson

我不確定，但我認爲bootstraps網格系統的工作與12個culumns。有更多列的塊會跳進下一行，但這是一個幸運的結果。拉和推它不起作用（https://github.com/twbs/bootstrap/issues/10107） – schlagi123 2014-09-22 13:10:59

這不完全是一回事，但它接近...

Bootply：http://www.bootply.com/D5AmKsc6aT

HTML：

<div class="row"> 
    <div class="col-xs-12 col-md-6"> 
    <div class="row"> 
     <div class="col-xs-12">A</div> 
     <div class="col-xs-12">B</div>  
    </div> 
    </div> 
    <div class="col-xs-12 col-md-6">C</div> 
</div>

來源

2014-09-22 13:16:32 pbenard

謝謝，然而在這個例子中，A和C最終會在彼此旁邊結束，但是然後B不會穿過桌面上的整個頁面。 – 2014-09-23 08:50:17

有沒有需要大量的HTML，它只是一個2列布局的每一列是50％。你不需要嵌套列。您不需要在非嵌套結構中指定col-xs-12 - 在列類最小寬度以下時，內容爲100％。

DEMO：http://jsbin.com/paqoke/2/edit

<div class="row"> 

     <div class="col-sm-6"> 

     <p>A</p> 

     <p>B</p> 

     </div><!--/.col-*-6--> 

     <div class="col-sm-6"> 
      C 
     </div><!--/.col-*-6--> 

    </div><!--/.row--> 

</div><!--/.container-->

來源

2014-09-22 13:35:29 Christina

謝謝，但是在這個例子中，A和C最終會在彼此的旁邊結束，但是B並沒有跨過桌面上的整個頁面。 – 2014-09-23 08:38:38

可悲的是，推/拉不會幫助你在這裏，因爲你不能在一列跳。你必須複製一些你的內容（在這個例子中，我欺騙了col-c）並使用bootstraps hidden-xs和visible-xs助手類來顯示/隱藏適當的設備。

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6 bg-success"> a </div> 
    <div class="hidden-xs col-sm-6 bg-info"> c desktop</div> 
    <div class="col-xs-12 bg-warning"> b </div> 
    <div class="visible-xs col-xs-12 bg-info"> c mobile</div> 
    </div> 
</div>

DEMO：http://www.bootply.com/SW2ygwLVNY

另外值得注意的，你不必申報col-xs-12如果你聲明的另一個電網級，因爲它是默認xs寬度。（即，在xs上時，col-sm-6默認爲col-xs-12）。

來源

2014-09-24 19:32:18

我很害怕這種情況。不幸的是我不能使用隱藏和可見的類，因爲我的順利滾動插件變得困惑。我可以用媒體查詢和jquery將不同的ID推送給隱藏的div，或者病態的可能只是向客戶解釋她只是簡單地接受showreel將在底部:) Thx的反饋，雖然！ – 2014-09-25 00:14:13

引導中的堆疊順序

回答

相關問題