CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3griddynamic-columns
Brian Rice
Brian Rice

Reputation: 3257

Bootstrap nested columns collapsing too soon

I have created nested columns as follows:

<div class="row">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6">A1</div>
            <div class="col-sm-6">B1</div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6">A2</div>
            <div class="col-sm-6">B2</div>
        </div>
    </div>
</div>

enter image description here

Is there anyway to keep the nested columns from collapsing until much later when the screen gets too skinny to fit them?

Upvotes: 0

Views: 446

Answers (1)

user3589620
user3589620

Reputation:

You have to add col-xs-12 to every main column and col-xs-6 for the nested row:

<div class="row">
    <div class="col-sm-6 col-xs-12">
        <div class="row">
            <div class="col-sm-6 col-xs-6">A1</div>
            <div class="col-sm-6 col-xs-6">B1</div>
        </div>
    </div>   
    <div class="col-sm-6 col-xs-12">
        <div class="row">
            <div class="col-sm-6 col-xs-6">A2</div>
            <div class="col-sm-6 col-xs-6">B2</div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions