如何使一行中的最后一个 div 溢出到下一行？

Question

I have 3 rows in my webpage using bootstraps grid. The first row has 3 divs of equal width while the next two rows have 2 divs of the same width left aligned. However, the last div of the first row is longer than the first two divs and I want it to overflow into the second row. How would I do this?

I have a link here of what I mean: http://imgur.com/a/mxnaH

Answer 1

You would have to separate the page in example "content-left, content-right". Bootstrap isn't supposed to be used to have rows overflow in to another. So if you give content-left a width of like 8, and content-right 4. That way you can have different heights and make it seem like it's overflowing

Answer 2

Try this grid:

<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="row">
        <div class="col-6"></div>
        <div class="col-6"></div>
        <div class="col-6"></div>
        <div class="col-6"></div>
      </div>
    </div>
    <div class="col-4"></div>
  </div>
</div>