Bootstrap columns stacking vertically and not horizontally

Question

I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.

See on Jsfillde

Here's my code

<div class="container">
    <div class="row"  style="padding:13px 15px;">
        <div class="pull-left span4">
            <a href=""><img src="themes/custom/img/logo.png" width="120" alt="logo"/></a>
        </div>
        <div class="pull-right span4">
            <div class="row">
                <div class="col-sm-4">One</div>
                <div class="col-sm-4">Two</div>
                <div class="col-sm-4">Three</div>
            </div>
        </div>
    </div>
</div>

I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.

What am i doing wrong?

Answer 1

Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle

Futher reading - http://getbootstrap.com/css/#grid-options

Answer 2

I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.