Can I have bootstrap columns go to 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 go to new rows two by two, except on mobile phones. Is that 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 output

1 2 3 4 

on medium screen size,

1 2
3 4 

on small screen size and

1
2
3
4 

on extra small screen size

You can accomplish that using col-xs-12 , col-sm-6 and col-md-3 classes like 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's a link to JSFiddle .

Answer 3

Here, look at this. You'll have 4 columns for PC, 2 columns for small devices, and 1 column for extra small devices like 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> 

For better understanding how this works, look at bootstrap's documentation - http://getbootstrap.com/css/#grid-example-mixed-complete