bootstrap-3 horizontal forms label not staying at the top input fields

bootstrap-3 horizontal forms label not staying at the top input fields

When using Bootstrap 3 with .form-horizontal, with the bootstrap classes
below, I get forms with the label on top which is what I want.
http://bootply.com/73486
However, in Image 2, I try to reduce the width to my desired size, using
classes like .col-lg-*, which suddenly forces the labels to the side
instead of remaining on top. I have tried different sizes to no avail..
<div class="form-group">
<label class="control-label"> <%= f.label :title %></label>
<div class="form-control">
<%= f.text_field :title, :placeholder => "title" %>
</div>
</div>
Image 1

Image 2
However, when I try to wrap inputs in grid columns so as to reduce the
width to my desired size, the labels move to the side of the form inputs
instead of on top.
<div class="form-group">
<label class="control-label col-lg-2"> <%= f.label :title %></label>
<div class="col-lg-10">
<div class="form-control">
<%= f.text_field :title, :placeholder => "title" %>
</div>
</div>
</div>