Clear Rows When Doing Multi-responsive Columns - Bootstrap

Question

That title might not be very accurate but here is the situation:

Answer 1

I was looking for a solution as well and since my HTML gets rendered through a CMS I couldn't use the solution of the accepted answer.

So my solution is:

.teaser {
  // break into new line after last element
  > div:last-child {
    clear: right;
  }
}

.teaser {
  // two colums
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    > div:nth-child(2n+1) {
      clear: left;
    }
  }
}

.teaser {
  // three colums
  @media (min-width: @screen-md-min) {
    > div:nth-child(3n+1) {
      clear: left;
    }
  }
}

    
div1
    
div2
more content
    
div3
    
div4
    
div5
more content content
content
    
div6
    
div7
more content
    
div8

Hope this helps someone :-)