1. Элемент должен являться блочным чтобы это работало, т.е. когда применено свойство float: left элемент переводится браузером в блочный (display: block)
2. Блочные элементы по-умолчанию начинаются с новой строки. Не достаточно просто сделать элемент блочным, чтобы оставить его на той же строке.
3. Чтобы блочный элемент оставался на той же строке нужно задать предыдущему перед ним элементу CSS стиль float: left .
4. У родителя обоих элементов (их контейнера) должна быть задана ширина width в процентах, пикселях или чем-то еще.
5. Эта ширина не должна быть меньше ширины обоих объектов внутри контейнера, включая их margin, padding, border.

чтобы объект «съехал» нужно применить к нему стиль float:

со значением:

• left;     — влево
• right;  — вправо

сдвигает весь элемент, включая рамку, отступы и ширину рамки в указанном направлении (влево или вправо).

в Bootstrap это организовано добавлением класса уже содержащего этот стиль:

xx — число от 1 до 12 ширина сдвига, равная ширине колонки такого же формата. Эта ширина задается в процентах и ее можно увидеть в boostrap.css файле

отличия всех -sm-, -xs-,-md- классов в том, что у Boostrap есть 3 основных вида разрешения экрана контролируемых через

<span class="p">@media (</span><span class="n">max-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-xs-max</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}

</span>

внутри boostrap.css таблицы стилей.
Итак, классы для:

для сдвига вправо:

• col-sm-push-xx
• col-xs-push-xx
• col-md-push-xx

для сдвига влево:

• col-sm-pull-xx
• col-xs-pull-xx
• col-md-pull-xx

чтобы сдвинуть колонки ВЛЕВО за счет увеличения свойства CSS margin-left (левого промежутка или поля между колонками) нужно использовать эти классы CSS из комплекта Boostrap:

только для сдвига влево:

• col-sm-offset-xx
• col-xs-offset-xx
• col-md-offset-xx

если часть содержимого контейнера скрывается, есть замечательное CSS свойство и его значение:

оно делает так, чтобы текст переносился по словам на другую строку, а не прятался за границами контейнера (кнопки, div…)