title: How to break cols in bootstrap3
body: <p>i have 4 box in code below, default in medium size, all 4 box are in one row. It is OK.
  In x-small size (mobile) all 4 box will fullwith is OK.</p>
  
  <p>But in small size (>768px &amp; &lt;1000px): how i can make Box1,Box2 in row1, and Box3, Box4 in row 2</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $('head').append('&lt;meta name="viewport" content="width=1000px, initial-scale=1"/&gt;');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
  border:solid 1px red;
  }
  .box3,.box4 {
  background:grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="box col-sm-6 col-md-4" id="col4_1"&gt;Box 1&lt;/div&gt;
      &lt;div class="col-sm-6 col-md-8"&gt;
        &lt;div class="row"&gt;
          &lt;div class="box col-sm-12 col-md-4" id="col4_2"&gt;Box 2&lt;/div&gt;
          &lt;div class="box box3 col-sm-12 col-md-4" id="col4_3"&gt;Box 3&lt;/div&gt;
          &lt;div class="box box4 col-sm-12 col-md-4" id="col4_4"&gt;Box 4&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>