Can I have bootstrap columns go to next row two by two on smaller screens?

ivanacorovic picture ivanacorovic · Oct 13, 2015 · Viewed 8.5k times · Source

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

max picture max · Oct 13, 2015

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>