Kann ich Bootstrap-Spalten auf kleineren Bildschirmen nacheinander in die nächste Zeile verschieben?

Question

Ich habe diesen HTML Code:

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

würde ich diese Spalten auf neue Zeilen zwei und zwei, außer auf dem Handy gehen möchten. Ist das möglich?

Dank

Answer 1

Sie können so etwas wie folgt verwenden:

<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

Hier, schau mal. Sie haben 4 Spalten für PC, 2 Spalten für kleine Geräte und 1 Spalte für extra kleine Geräte wie mobile.

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

Zum besseren Verständnis, wie das funktioniert, sehen Sie Bootstrap-Dokumentation - http://getbootstrap.com/css/#grid-example-mixed-complete

Answer 3

Wenn ich richtig verstehe wollen Sie die Ausgabe

1 2 3 4 

auf mittlerer Bildschirmgröße,

1 2 
3 4 

auf kleine Bildschirmgröße und

1 
2 
3 
4 

auf extra kleine Bildschirmgröße

Sie erreichen können, dass die Verwendung von col-xs-12, col-sm-6 und col-md-3 Klassen wie Code unten.

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

Hier ist ein Link zu JSFiddle.