Bootstrap重新排序col-xs-12

-2

我正在使用bootstrap並希望僅在xs視圖中重新排列我的列。Bootstrap重新排序col-xs-12

例如：

大屏幕 - 平板電腦，這是什麼樣子：

列A ------- B列

我面臨的問題是，當我得到到XS它看起來像這樣：

列A
B列

當我希望它看起來像這樣：

B列
列A

來源

2016-06-10 ewcoder

一些細節提供給我們。 – Li357

不知道用純CSS的，但是如果你願意的話，你可以藉助'jquery'。 –

如果它們是靜態列，那麼一個簡單的解決方案就是有兩列B。一列在列A的頂部，給它可見的xs，另一列在列A的下面，給它一個hidden-xs。但是，我猜這是業餘愛好，但很簡單。 –

您可以輕鬆地引導Column Reordering

工作實例做到這一點;代碼，相關的東西的問題，你試過在調試方面的東西 -

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container text-center"> 
 
    <div class="row"> 
 

 
    <div class="col-sm-6 col-sm-push-6"> 
 
     <div class="alert alert-danger"> 
 
     B 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-6 col-sm-pull-6"> 
 
     <div class="alert alert-info"> 
 
     A 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

來源

2016-06-10 04:10:45 vanburen

你只需要扭轉在列彩車。看看下面的片段。

DEMO

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="col-md-6 col-sm-6 col-xs-12 pull-right"> 
 
    Column B 
 
    </div> 
 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
 
    Column A 
 
    </div> 
 
</div>

來源

2016-06-10 04:04:44 Sathish

Bootstrap重新排序col-xs-12

回答

相關問題