Q:

Bootstrap: Stop last columns under the second last column

I have three different height of the columns (lg-box, md-box and sm-box).I want to show the column #7 in the next line but not sure why it is filling the empty space and coming up under the column 6. It should show in the next line. It works fine when I have less than 7 or more than 8 columns but it creates a problem only when I have total 7 columns. Is possible to stop filling the empty space of column 6?

Here is the fiddle 
HTML
<div class="col-xs-2 lg-box">1</div>
<div class="col-xs-2 lg-box">2</div>
<div class="col-xs-2 lg-box">3</div>
<div class="col-xs-2 lg-box">4</div>
<div class="col-xs-2 lg-box">5</div>
<div class="col-xs-2 md-box">6</div>
<div class="col-xs-2 sm-box">7</div>

CSS
.col-xs-2{
    border:2px solid white;
    box-sizing: border-box;
}
.lg-box{
    background-color: red;
    height: 200px;
}
.md-box{
    background-color: red;
    height: 120px;
}
.sm-box{
    background-color: green;
    height: 60px
}

A:

EDIT: If you are concerned for support for older browsers in relation to this answer, please consider using a flexbox polyfill, like https://github.com/jonathantneal/flexibility
You also can use bootstrap's row class to declare new rows.
<div class="row">
  <div class="col-xs-2 lg-box">1</div>
  <div class="col-xs-2 lg-box">2</div>
  <div class="col-xs-2 lg-box">3</div>
  <div class="col-xs-2 lg-box">4</div>
  <div class="col-xs-2 lg-box">5</div>
  <div class="col-xs-2 md-box">6</div>
</div>
<div class="row">
   <div class="col-xs-2 sm-box">7</div>
</div>

https://jsfiddle.net/wumnLz96/1/
If you want to keep the dynamic number of columns, use a flex container to wrap them.
<div class="row">
  <div class="col-xs-2 lg-box">1</div>
  <div class="col-xs-2 lg-box">2</div>
  <div class="col-xs-2 lg-box">3</div>
  <div class="col-xs-2 lg-box">4</div>
  <div class="col-xs-2 lg-box">5</div>
  <div class="col-xs-2 md-box">6</div>
  <div class="col-xs-2 sm-box">7</div>
</div>

.col-xs-2{
    border:2px solid white;
    box-sizing: border-box;
}
.lg-box{
    background-color: red;
    height: 200px;
}
.md-box{
    background-color: red;
    height: 120px;
}
.sm-box{
    background-color: green;
    height: 60px
}
.row{ 
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

https://jsfiddle.net/wumnLz96/2/

