Bootstrap - covering or overlapping columns

Question

I want to cover or overlap two columns.

Having one on the left side (6 columns) and one on the right side (6 columns).

My result should be: left side (8) and right side (6) - overlapping for 2 columns.

I have looked into Bootstrap documentation for offset/push/pull properties but got no proper result.

Here is jsfiddle.

Answer 1

Try adding a negative margin-left to the smaller div. (I added the panel class so the overlap would be visible). For the sake of the example, I just added the css in a style attribute.

<div class="col-lg-6">
    <div class="col-lg-8 panel">this is the left div</div>
    <div class="col-lg-6 panel" style="margin-left: -16.7%;z-index:-1">&nbsp;&nbsp;&nbsp;this is the right div</div>
</div>