小さな画面でブートストラップカラムを2行ずつ2行目に移動できますか？

Question

私はこのhtmlコードを持っている：

 <div class="row fluid"> 
      <div class="col-md-3 clearfix"> 
        <img src="img"> 
        <div class="img-text"> 
         Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
         jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
       </div> 
      </div> 
      <div class="col-md-3 clearfix"> 
        <img src="img"> 
        <div class="img-text"> 
         Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
         jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
       </div> 
      </div> 
      <div class="col-md-3 clearfix"> 
        <img src="img"> 
        <div class="img-text"> 
         Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
         jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
       </div> 
      </div> 
      <div class="col-md-3 clearfix"> 
        <img src="img"> 
        <div class="img-text"> 
         Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
         jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
       </div> 
      </div> 
     </div> 

私はこれらの列は、携帯電話を除いて、新しい行に2つずつ行ってみたいです。それは可能ですか？

おかげ

Answer 1

あなたはこのようなものを使用することができます。これを見て、ここで

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3> 
     Content 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3> 
     Content 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3> 
     Content 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-3> 
     Content 
    </div> 
</div> 

Answer 2

を。 PCの場合は4列、小型デバイスの場合は2列、モバイルなどの小型のデバイスの場合は1列になります。これがどのように機能するかをよりよく理解するために

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
     <div class="row fluid"> 
 
      <div class="col-xs-12 col-sm-6 col-md-3 clearfix"> 
 
        <img src="img"> 
 
        <div class="img-text"> 
 
         Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
 
         jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-6 col-md-3 clearfix"> 
 
        <img src="img"> 
 
        <div class="img-text"> 
 
         Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
 
         jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-6 col-md-3 clearfix"> 
 
        <img src="img"> 
 
        <div class="img-text"> 
 
         Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
 
         jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-6 col-md-3 clearfix"> 
 
        <img src="img"> 
 
        <div class="img-text"> 
 
         Tekst fdskfjsdghdfn ufghdg ufdhs gdfksjhg 
 
         jfdksgbfjdsk gfd jgbdfjhg dfkjhg fidughdf kjvhdf ugdfh 
 
       </div> 
 
      </div> 
 
     </div>

、ブートストラップのドキュメントを見て - http://getbootstrap.com/css/#grid-example-mixed-complete

Answer 3

私が正しく理解していれば、あなたはメディアの画面サイズに出力

1 2 3 4 

をしたい、

小さな画面サイズと

1 
2 
3 
4 

上の

1 2 
3 4 

余分な小さな画面サイズに

あなたは以下のコードのようなcol-xs-12、col-sm-6とcol-md-3クラスを使用していることを達成することができます。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3"> 
      1 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3"> 
      2 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3"> 
      3 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3"> 
      4 
     </div>   
    </div> 
</div> 

ここにJSFiddleへのリンクがあります。