Почему блок уплывает вниз?

Question

[Сергей Маргелов]

Впервые взялся сегодня за Bootstrap 3 (до этого немного знал 2-ю версию).
Столкнулся с такой проблемой codepen.io/anon/pen/Kzkfw?editors=110
Если закомментировать float в последнем блоке CSS — то блок контента и меню сайдбара выравниваются по верхнему краю. Но с float контент съезжает вниз.
Помогите разобраться, из-за чего это происходит. И как это победить (желательно без откровенных костылей, типа подтягивания блока контента вверх).
(Кроме своего CSS, к коду на CodePen подключен bootstrap 3, но я не думаю, что это их баг)

Comments

[Сергей Маргелов]

Обнулив margin-top для h2 в блоке контента, удалось вернуть блок на место. Только, понимания причины это не дало. Почему margin для внутреннего блочного элемента влияет на положение блока-родителя? Помогите разобраться.

Answer 1

[Виталий Киренков]

Не совсем понятно почему по ДОМУ у вас сначала идёт контент, а потом сайдбар - это первое...
Во-вторых если их поменять местами, и для сайдбара сделать left: 0, а для контента right: 0, то всё ровно будет.

Comments

[Сергей Маргелов]

Это сделано для того, что бы на экране смартфона контент был выше сайдбара. Так это реализовано в самом Bootstrap, я ничего нового не придумал.