In bootstrap, how can I use nested divs of rows/columns properly to create a specific layout?

Question

Here is an image of the layout I am trying to create in bootstrap using the bootstrap grid system.

I think I'm close but am missing something. Here's what I have done so far, you can see it in codepen. I have named each box after how it appears chronologically in the html structure.

For example this is how I have structured the middle boxes:

         <div class="col-xs-6">

            <div class="col-xs-12">
            <p>2</p>
            </div>

            <div class="col-xs-6">
                <p>3</p>
            </div>

            <div class="col-xs-6">
                <p>4</p>
            </div>

            <div class="col-xs-12">
                <p>5</p>
            </div>

        </div>

I then have this, but box 7 does not line up with the middle column like I want it too:

        <div class="col-xs-3">
            <p>6</p>
            <p>6</p>
            <p>6</p>
        </div>

        <div class="col-xs-9">
            <p>7</p>
        </div>

Is this the way I am supposed to use rows and columns and the grid structure in general if I want to achieve a layout as pictured in the first link? Please see full codepen code.

Answer 1

You're just missing one important Bootstrap rule about nesting columns

Content should be placed within columns, and only columns may be immediate children of rows.

https://codepen.io/anon/pen/yvmBPa

       <div class="row">
            <div class="col-xs-3">
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
            </div>
            <div class="col-xs-6">
               <div class="row">
                <div class="col-xs-12">
                <p>2</p>
                </div>

                <div class="col-xs-6">
                  <p>3</p>
                </div>

                <div class="col-xs-6">
                  <p>4</p>
                </div>

                <div class="col-xs-12">
                  <p>5</p>
                </div>
               </div>
            </div>
            <div class="col-xs-3">
                <p>6</p>
                <p>6</p>
                <p>6</p>
            </div>
            <div class="col-xs-9">
                <p>7</p>
            </div>
        </div>