Search code examples
htmlcsstwitter-bootstrap-3responsiveness

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


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


Solution

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