Css list with fluid layout
<p>I'm creating an ordered list of items.  Each <strong><em>li</em></strong> will contain a piece of text which is different in size.</p>

<p>I'm using bootstrap3 and I was applying the following html:</p>

<pre><code>    &lt;style&gt;
        ol li:nth-child(2n+0) {
            list-style: none;
        }
    &lt;/style&gt;

    &lt;ol class="col-lg-12" style="list-style:none;margin-left:0"&gt;
        &lt;li class="col-lg-6"&gt;1,1&lt;/li&gt;
        &lt;li class="col-lg-6"&gt;1,2&lt;/li&gt;
        &lt;li class="col-lg-6"&gt;2,1&lt;/li&gt;
        &lt;li class="col-lg-6"&gt;2,2&lt;/li&gt;  
    &lt;/ol&gt;
</code></pre>

<p>But the result I get is this:</p>

<p><a href="https://i.stack.imgur.com/Et20O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Et20O.png" alt="enter image description here"></a></p>

<p>I'm looking to achieve this:</p>

<p><a href="https://i.stack.imgur.com/N7Bg5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N7Bg5.png" alt="enter image description here"></a></p>

<p>Has anyone managed this before with Bootstrap?</p>