2

I'm creating an ordered list of items. Each li will contain a piece of text which is different in size.

I'm using bootstrap3 and I was applying the following html:

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

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

But the result I get is this:

enter image description here

I'm looking to achieve this:

enter image description here

Has anyone managed this before with Bootstrap?

Rob
  • 6,819
  • 17
  • 71
  • 131
  • your code is not complete, please post ALL relevant code to your question – Mihai T Aug 24 '16 at 12:02
  • 1
    you can use [css columns](https://css-tricks.com/almanac/properties/c/columns/) but it only works for the newer browsers, failing that, you have to use a jquery plugin for masonry – Pete Aug 24 '16 at 12:03

0 Answers0