what trying have 2 columns of 3 nested pink squares each, @ large , med settings, on small screen tablet single column 3 pink squares single column 3 pink squares under that. @ xs mobile level i'm trying again have 2 columns 1 column of nested pink squares in each. thought css requesting, that's not happening :( doing wrong here?
here's 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>
halfzebra right. if you nest columns have new 12 columns inside one.
<div class="col-md-6"> <div class="row"> <div class="col-md-12"> fill col-md-6 </div> </div> </div> and in example above use rows when im starting one.
i don't know if got right 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 red boxes not fitting in columns. changed width 100% can see how columns acting.
plunker: http://plnkr.co/edit/ee4ewrrgij0lfdpbcq7t?p=preview
Comments
Post a Comment