Bootstrap grid nesting columns issue - html

Question

What I am trying to do is to have two columns of 3 nested pink squares each, at the large and med settings, then on small screen tablet a single column with 3 pink squares then another single column with 3 pink squares under that. Then at the xs mobile level I'm trying to again have two columns but with 1 column of nested pink squares in each. I thought this is what my css is requesting, but that's not what is happening :( What am I doing wrong here?
Here's a plunker
Here's the html:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle</h4>
<div ng-repeat="x in things">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle 2</h4>
<div ng-repeat="x in things2">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>

Answer 1

It seems like you're confused by the number at the end of the class.
While nesting .col-xs-6 inside another .col-xs-6, you will get a column which takes only 50% of the width.
It's a primary principle of 12 column grid. Divide 100% / 12 = 8.33333333333% and you will get width property of a single column in percents, please have in mind that the width in percents is calculated according to the parent width.
Bootstrap's grid is not informative while nesting.
Eg. think of .col-xs-6 as width: 50%;, .col-xs-4 is width: 33.33333%;

Answer 2

halfzebra is right. If you you nest columns you always have new 12 columns inside another one.
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
This will fill col-md-6
</div>
</div>
</div>
And like in example above I always like to use rows when Im starting one.
I don't know if I got you right but you could do something like this:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things2">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
</div>
Keep in mind that your red boxes are not always fitting in to the columns. I changed width to 100% so you can see how columns are acting.
Plunker: http://plnkr.co/edit/EE4eWrrGIJ0lFdPBcq7T?p=preview