Bootstrap nested columns collapsing too soon

Question

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>

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

Answer 1

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>