收起3分移動設備

Question

列我有一個自舉佈局像這樣：

<div class="container"> 
 
     <div class="row"> 
 
     <div class="col-sm-4 top-col-left"> 
 
      <h4>24 Hour High</h4> 
 
      <h1>$7.88</h1> 
 
     </div> 
 
     <div class="col-sm-4 top-col-center"> 
 
      <h4>24 Hour Low</h4> 
 
      <h1>$1.88</h1> 
 
     </div> 
 
     <div class="col-sm-4 top-col-right"> 
 
      <h4>24 Hour Change</h4> 
 
      <h1>$2.88</h1> 
 
     </div> 
 
     </div> 
 
    </div>

當移動設備上觀看的佈局將成爲一列的3行。是否有可能將其顯示爲1列2列和1列1列？

Answer 1

這將成爲2行2和1列分別xs（< 768px）設備

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4 col-xs-6 top-col-left"> 
     <h4>24 Hour High</h4> 
     <h1>$7.88</h1> 
    </div> 
    <div class="col-sm-4 col-xs-6 top-col-center"> 
     <h4>24 Hour Low</h4> 
     <h1>$1.88</h1> 
    </div> 
    <div class="col-sm-4 col-xs-12 top-col-right"> 
     <h4>24 Hour Change</h4> 
     <h1>$2.88</h1> 
    </div> 
    </div> 
</div> 

Answer 2

引導是建立一個圍繞一個12列的網格系統，目前你的HTML/CSS是說，每列應占用屏幕的三分之一。

如果你想有2列，再裹上一列的下方，然後像這樣的工作，

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

可以爲更大的屏幕尺寸添加其他類。