CODEWITHSUNDEEP
twitter-bootstrap
Rob Sedgwick
Rob Sedgwick

Reputation: 4514

Can a bootstrap grid partially collapse?

I am using bootstrap's grid system. I have sections as follows.

A1 A2 A3
B1 B2 B3 B4

The A's are wide and the B's are narrow. I would like it to collapse on a narrow screen to:

A1
A2
A3
B1 B2 
B3 B4

In other words I don't want all the Bs on separate rows if there is room. On a really small display though it should collapse to having each B on a separate row. Is this possible?

Here's a simple example

<div class="row">
    <div class="col-sm-4">
        Long test here
    </div>
    <div class="col-sm-4">
        Long test here
    </div>
    <div class="col-sm-4">
        Long test here
    </div>
</div>
<div class="row">
    <div class="col-sm-3">
        short
    </div>
    <div class="col-sm-3">
        short
    </div>
    <div class="col-sm-3">
        short
    </div>
    <div class="col-sm-3">
        short
    </div>
</div>

jsfiddle here: http://jsfiddle.net/GrimRob/e3wtm3z8/3/

Upvotes: 0

Views: 146

Answers (1)

Christina
Christina

Reputation: 34652

Demo: http://jsfiddle.net/xdL5ywm7/1/

It depends on what you mean by narrow screen. You can simply change col-sm-4 to col-md-4 in your first .row and under 992px that will be full width. In the second .row change all the col-sm-3 to col-xs-6 col-sm-3 and add a responsive utility clearfix after 12 columns for that breakpoint. See the docs and the demo link.

col-sm is 768px and up
col-md is 992px and up
col-lg is 1200px and up

If you just have a .col-md-* under 992px that column will be full width.

Your fiddle didn't match the code in your question, I didn't fix that.

Upvotes: 2

Related Questions