Can't apply bootstrap grid to layout

Question

I'm trying to code the following layout using Bootstrap 3 - it's a subsection of a website with a grid of 10 (the other 2 are for the sidebar, which is not the problem here), the numbers represent how much a particular block spans:

My first thought was using the push/pull classes, but I tried loads of combinations and none was successful, I suspect that it's because there's potentially 3 rows there, but none goes across all 10 columns, so I have to find yet other configuration that doesn't use rows in the particular block. Then I attempted a different configuration:

<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-7"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-7"></div>
    <div class="col-sm-3"></div>
</div>
<div class="row">
    <div class="col-sm-10"></div>
</div>

I know a row should only have 12 cols, but, if I'm not mistaken, bootstrap wraps it at 12; then my idea was to pull up the second col-sm-7 div using position: relative. The size of this particular div is variable (it can be shorter than col-sm-3 to the right, for example) and I had to also pull col-sm-10 (the separate row one), so even if I used @media in my CSS, the col-sm-10 div was either overlapping or too far away – not ideal, by far.

Does anyone have an elegant solution to this?

Answer 1

I finally figured out a solution that works without assuming heights for any of the divs, which was my main issue. And it is surprisingly simple:

<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-7"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-3 pull-right"></div>
    <div class="col-sm-7"></div>
</div>
<div class="row">
    <div class="col-sm-10"></div>
</div>

Answer 2

        <div class="container">
    <div class="row">
        <div class="col-md-4 number1">3</div>
        <div class="col-md-8 number2">7</div>

        <div class="col-md-6 number3">4</div>
        <div class="col-md-2 number4">7</div>
        <div class="col-md-9 number5">3</div>
    </div>
    <div class="row">
        <div class="col-md-12 number6">10</div>
    </div>
     </div>

/*** CSS ***/
    <style>
    .number1{ background:#036; min-height:100px; color:#FFF;}
    .number2{ background:#09C; min-height:50px;}
    .number3{ background:#9C0; min-height:50px;}
    .number4{ background:#C03; min-height:150px;}
    .number5{background: none repeat scroll 0 0 #6666FF;
        min-height: 100px;
        position: absolute;
        top: 100px;}
    .number6{ background:#F6F; min-height:100px;}


    </style>