I'm trying to build a grid like:

![enter image description here](https://i.stack.imgur.com/oDmvg.png)

However, because columns use paddings instead of margins, when I add a background color the columns end up touching.

I could add another div within' each column and set the background on it, but I'm already not a fan of all of the added markup required by Bootstrap. Is there a clean way to accomplish this without adding a dozen extra elements?

### **EDIT:**

To clarify, the grid is like a col-4, col-8... Then within' the col-8 are 3 col-4's...

[JSFiddle Link](http://jsfiddle.net/tpyvvxou/)  

[JSFiddle Link w/Wells](http://jsfiddle.net/9rpxq84o/2/) (Not a fan of the extra markup for the bg)

```
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="well well-sm">Left Top</div>
            <div class="well well-sm">Left Bottom</div>
        </div>
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-4">
                    <div class="well well-sm">Left/Middle</div>
                </div>
                <div class="col-sm-4">
                    <div class="well well-sm">Right/Middle</div>
                </div>
                <div class="col-sm-4">
                    <div class="well well-sm">Right Top</div>
                    <div class="well well-sm">Right Bottom</div>
                </div>
            </div>
            <!--end row-->
        </div>
    </div>
    <!--end row-->
    <div class="row">
        <div class="col-sm-12">Other content...</div>
    </div>
    <!--end row-->
</div>

```