ブートストラップ3で別のレイアウトを表示するにはどうしたらいいですか？

Question

私は自分のモバイルビュー用に別のレイアウトを表示しようとしています。グリッドシステムを使用しているデスクトップビューでは、私は4列のそれぞれに2列の画像とラベル+値があります。モバイルではイメージの列をスキップしたいと思います。ラベルと値のために、次のようなものを隣り合わせにします。

これはラベルです。これはスパンです。デスクトップバージョンで

1列は、このようなものになります。

<div class="col-md-3"> 
     <div class="col-md-2"> 
     <p>col-md-4</p> 
     </div> 
     <div class="col-md-10"> 
     <div>This is a label</div> 
     <span>This is a span</span> 
     </div> 
</div> 

を私はCOL-SM-3を使用しようとしましたが、それはまだデスクトップに表示されますか？ラベルと値が相互に隣り合ったモバイルビューを取得するにはどうすればよいですか？

も参照してください：あなたは、画面のサイズに基づいて、要素/クラス/ IDの属性を変更することができますメディアクエリを使用してcodepen

Answer 1

ブートストラップCSSクラスを使用することができます。

<h2>Example</h2> 
<p>Resize this page to see how the text below changes:</p> 
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1> 
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1> 
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1> 
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1> 

Answer 2

。あなたは次のようにdisplay: none;を使用することに特に興味がある可能性があり：あなたはcol-xs-3の機能（またはお好みのいずれかを）倍増することができます

CSSもちろん

/*For smartphone and small devices*/ 
@media only screen and (min-width: 480px) { 
    .hide-me { 
     display: none; 
    } 
} 

/*For tablet sized devices and larger*/ 
@media only screen and (min-width: 748px) { 
    .hide-me { 
     display: block; 
    } 
} 

が、中にあなたのクラスセレクタとしてそれを使用してメディアクエリ

@media only screen and (min-width: 748px) { 
    .col-xs-3 { 
     display: block; 
    } 
} 

特に、Twitterで提供されているレスポンシブデザインを確認してください。最初にモバイルが一般的です。より小さいメディアクエリから始めて、次に大きくなります。

http://getbootstrap.com/css/