CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgrid
Th1sD0t
Th1sD0t

Reputation: 1119

Bootstrap.js - Make root columns break before nested columns

I created a simple grid system using bootstrap.

<div class="container">
    <div class="row">
        <div class="col-lg-6>
            <div class="row">
                <div class=col-lg-6>
                    Nested Column 1
                </div>
                <div class=col-lg-6>
                    Nested Column 2
                </div>
            </div>
        </div>
        <div class="col-lg-6">
             Root Column 2
        </div
    </div>
</div>

Now I'd like to make Root Column 2 break before the Nested Columns break into new lines when the screen resolution changes.

_____________________
|         |         |
| N1 | N2 |    R2   |
_____________________

Resolution changes =>

___________
|         |
| N1 | N2 |
___________
|         |
|    R2   |
___________

Resolution changes again =>

_______
|     |
|  N1 |
_______
|     |
|  N2 |
_______
|     |
|  R2 |
_______

Upvotes: 0

Views: 121

Answers (2)

vas
vas

Reputation: 960

http://jsfiddle.net/vasanthanvas/ktd31mne/

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="row">
                <div class="col-md-6">
                    Nested Column 1
                </div>
                <div class="col-md-6">
                    Nested Column 2
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
             Root Column 2
        </div>
    </div>
</div>

Upvotes: 1

JohnMalkowich
JohnMalkowich

Reputation: 298

It's just a matter of setting the col definitions for each screenresolution. Bootstrap works in xs, sm, md and lg screens:

<div class="container">
    <div class="row">
        <div class="col-lg-6>
            <div class="row">
                <div class=col-md-6>
                    Nested Column 1
                </div>
                <div class=col-md-6>
                    Nested Column 2
                </div>
            </div>
        </div>
        <div class="col-lg-6">
             Root Column 2
        </div>
    </div>
</div>

Setting the nested column to md-6 instead of lg-6 should do the trick, which corresponds to: col-xs-12, col-sm-12 col-md-6, col-lg-6

if you only set the col-lg-6 it corresponds to: col-xs-12, col-sm-12 col-md-12, col-lg-6 which means when the screensize changes to md, it will have 100% width (12/12 columns)

Read more about bootstrap 3 grid system here: http://getbootstrap.com/css/#grid

Upvotes: 2

Related Questions