崩壊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行となるであろうが。代わりにこれを2列の1行と1列の1行として表示できますか？これはxs（< 768px）にそれぞれ2と1列の2行になります

Answer 1

デバイス

<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

ブートストラップは、現在お使いのHTML/CSSが各列がすべきことを言っている、12列のグリッドシステムを中心に構築され画面の3分の1を占めます。

あなたは、このような何かがうまくいく、その後2列と単一の列の下にラップを持つように欠けている場合は、

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

あなたは大画面サイズのため、他のクラスを追加することができます。