css - Setting up rows inside a 2 column layout with Bootstrap -

I'm trying to set up 2 columns, one "cola-9" and another "call-3", but I want to treat you inside each because it's a "col-12" grid, something like this:

I have tried with it:

  & lt; Div ng-app & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-9" & gt; & Lt; Div class = "row" & gt; & Lt; Div ng-repeat = "i [1, 2, 3, 4, 5, 6, 7, 8]" & gt; & Lt; Div class = "col-xs-3 left-side" & gt; {{I}} & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-3" & gt; & Lt; Div ng-repeat = "i [1, 2, 3]" & gt; & Lt; Div square = "right-side" & gt; {{I}} & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

I put it together, but as you can see, I can not resolve the appointment of the column on the right hand.

How can I solve this? Thanks in advance for any suggestions!

Actually, you've closed the row tag and when you Should not pass then a new one opened. Check it out:

  & lt; Div ng-app & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-9" & gt; & Lt; Div class = "row" & gt; & Lt; Div ng-repeat = "i [1, 2, 3, 4, 5, 6, 7, 8]" & gt; & Lt; Div class = "col-xs-3 left-side" & gt; {{I}} & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - removed from - & gt; & Lt; Div class = "col-xs-3" & gt; & Lt; Div ng-repeat = "i [1, 2, 3]" & gt; & Lt; Div square = "right-side" & gt; {{I}} & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Note that I & lt; / Div & gt; and & quot; Div class = "row" & gt; On the right & lt; Div class = "col-xs-3" & gt; . In this way, the second column will not appear beforehand, rather instead it will be next to see the updated JSFiddle for clarification.

Hope that helps!