title: How do I make the div inside the container use just 6 of the 12 columns in bootstrap 3?
body: <p>The code correctly shows two columns on large screens. But for tablet sized screens, both divs take up their own row, each using 12 columns.  </p>
  
  <p>I want each of them to be in the same container using 6 columns. I have tried changing the numbers in the classes <code>col-xs-12 col-sm-6 col-md-6 col-lg-4</code> 
  but nothing has worked. </p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row col-md-offset-0 col-lg-offset-2"&gt;
          &lt;p&gt;&lt;b&gt;We Offer:&lt;/b&gt;&lt;/p&gt;
          &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"&gt;
              &lt;ul&gt;
                  &lt;li&gt;test&lt;/li&gt;
                  &lt;li&gt;test&lt;/li&gt;
                  &lt;li&gt;test&lt;/li&gt;
                  &lt;li&gt;test&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 "&gt;
              &lt;ul&gt;
                  &lt;li&gt;test&lt;/li&gt;
                  &lt;li&gt;test&lt;/li&gt;
                  &lt;li&gt;test&lt;/li&gt;
                  &lt;li&gt;test&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>