Can I get bootstrap columns to the next row two by two on smaller screens?

Question

I have this 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> 

I would like these columns to break into two or two new lines, with the exception of mobile phones. Is it possible?

thanks

Answer 1

You can use something like this:

 <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

If I understand correctly, you want to output

 1 2 3 4 

with an average screen size,

 1 2 3 4 

with a small screen size and

 1 2 3 4 

on a small screen size

You can accomplish this using the col-xs-12 , col-sm-6 and col-md-3 classes, such as the code below.

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

Here is a link to JSFiddle .

Answer 3

Now, look at that. You will have 4 columns for PC, 2 columns for small devices, and 1 column for additional small devices such as 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> 

To better understand how this works, see the download documentation - http://getbootstrap.com/css/#grid-example-mixed-complete