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?