Posso avere colonne di bootstrap passare alla riga successiva due alla volta su schermi più piccoli?

Question

Ho questo codice 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> 

Vorrei queste colonne per andare a nuove righe a due a due, ad eccezione sui telefoni cellulari. È possibile?

Grazie

Answer 1

È possibile utilizzare qualcosa di simile:

<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

Qui, guardare a questo. Avrai 4 colonne per PC, 2 colonne per dispositivi di piccole dimensioni e 1 colonna per dispositivi extra-piccoli come il cellulare.

<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>

Per una migliore comprensione di come funziona, guardate la documentazione di bootstrap - http://getbootstrap.com/css/#grid-example-mixed-complete

Answer 3

Se ho capito bene si desidera uscita

1 2 3 4 

sulla media grandezza dello schermo,

1 2 
3 4 

delle dimensioni piccolo schermo e

1 
2 
3 
4 

su più dimensioni dello schermo piccolo

È possibile realizzare questo usando col-xs-12, col-sm-6 e col-md-3 classi come il codice di seguito.

<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> 

Ecco un link per JSFiddle.