title: Bootstrap push div content to new line
body: <p>Somehow I can not get out how to finish my code which I formatted as a list and need to format it as grid too which is switched by javascript.</p>
  
  <p>My HTML Code below is used to <strong>list</strong> a content:</p>
  
  <pre><code>&lt;div class="list"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"&gt;Right is next DIV&lt;/div&gt;
          &lt;div class="col-lg-6 col-md-6 col-sm-5 col-xs-12"&gt;Right is next DIV&lt;/div&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-4 col-xs-12"&gt;I am the last DIV&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS Code for the list. All other CSS is taken by bootstrap:</p>
  
  <pre><code>.styled_view div.list {
      padding: 0;
      width: 100%;
  }
  </code></pre>
  
  <p>The same code should be used to show <strong>grid</strong>:</p>
  
  <pre><code>&lt;div class="grid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"&gt;Under me should be a DIV&lt;/div&gt;
          &lt;div class="col-lg-6 col-md-6 col-sm-5 col-xs-12"&gt;Under me should be a DIV&lt;/div&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-4 col-xs-12"&gt;I am the last DIV&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS for the grid:</p>
  
  <pre><code>.styled_view div.grid {
      display: inline-block;
      overflow: hidden;
      vertical-align: top;
      width: 19.4%;
  }
  </code></pre>
  
  <p>The 19.4% for each part of gallery keeps the DIVs next to next. It will not push it to a new line. How could I solve it?</p>