How do I make the div inside the container use just 6 of the 12 columns in bootstrap 3?

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.

I want each of them to be in the same container using 6 columns. I have tried changing the numbers in the classes col-xs-12 col-sm-6 col-md-6 col-lg-4 but nothing has worked.

Here's my code:

<div class="container">
    <div class="row col-md-offset-0 col-lg-offset-2">
        <p><b>We Offer:</b></p>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 ">
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
    </div>

This appears to be working as I'd expect it to. According to the Documentation, a small screen is anything less than 768px which can actually be quite large. By opening the developer tools, you can see the screen dimensions whenever you resize a web page. You can use this to see how it deals with different breakpoints.

Here's a live demo of your code:

jsFiddle with Original Code

Screenshot:

Solution:

If you would like it to still have two columns at anything below 768 pixels, then change col-xs-12 to col-xs-6, like this:

<pre><code>&lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row col-md-offset-0 col-lg-offset-2&quot;&gt; &lt;p&gt;&lt;b&gt;We Offer:&lt;/b&gt;&lt;/p&gt; &lt;div class=&quot;<b>col-xs-6</b> col-sm-6 col-md-6 col-lg-4&quot;&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=&quot;<b>col-xs-6</b> col-sm-6 col-md-6 col-lg-4 &quot;&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; &lt;/div&gt; </code></pre>

Working Demo in jsFiddle