title: How to set responsive divs in my case?
body: <p>I want to use col-md-2 for the large pc view and col-xs-12 for tablet view. </p>
  
  <p>My problem is that when I turn to larger width view, I see there are gaps between each div. This doesn't happen in the tablet view. </p>
  
  <p>Html code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;div class="container"&gt;
      &lt;div id="wrapper"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-1"&gt;&lt;/div&gt;
              &lt;div class="col-xs-12 col-md-2"&gt;
                  &lt;div class="col-xs-3 col-md-12 box1"&gt;
                      test
                  &lt;/div&gt;
                  &lt;div class="col-xs-9 col-md-12 box2"&gt;
                      test 2
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-md-2"&gt;
                  &lt;div class="col-xs-3 col-md-12 box1"&gt;
                      test
                  &lt;/div&gt;
                  &lt;div class="col-xs-9 col-md-12 box2"&gt;
                      test 2
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-md-2"&gt;
                  &lt;div class="col-xs-3 col-md-12 box1"&gt;
                      test
                  &lt;/div&gt;
                  &lt;div class="col-xs-9 col-md-12 box2"&gt;
                      test 2
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-md-2"&gt;
                  &lt;div class="col-xs-3 col-md-12 box1"&gt;
                      test
                  &lt;/div&gt;
                  &lt;div class="col-xs-9 col-md-12 box2"&gt;
                      test 2
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-md-2"&gt;
                  &lt;div class="col-xs-3 col-md-12"&gt;
                      test
                  &lt;/div&gt;
                  &lt;div class="col-xs-9 col-md-12 test2"&gt;
                      test 2
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Jsfiddle <a href="http://jsfiddle.net/0qarh5yt/2/" rel="nofollow">link</a></p>
  
  <p>Can anyone help me about it? Thanks!</p>