HTML+CSS+JavaScript

Недавно я смотрел семинар по адаптивной верстке и там был выработан код, который очень наглядно показывает, каким образом происходит адаптация дизайна сайта к различным значениям ширины экрана. Для этого запускается страница в браузере и плавно сужается его окно. Код этой страницы я разместил вот здесь: http://wowa55.pz9.ru/2-61.html
И действительно: по мере сужения экрана сначала оба правых блока смещаются вниз, а затем все три показываются один под другим. И весь экран равномерно заполнен текстом.

Но это только на мониторе персонального компьютера.

А при проверке на смартфоне Xenium W3568 с экраном 854х480 картина совершенно другая. Я пробовал разные пороги адаптации, но в коде на вышеуказанной странице установлены 1000рх и 700рх.

При просмотре на широком экране (телефон горизонтально) мы видим первый блок и два блока рядом, расположенные внизу. В принципе, так и должно быть, только первый блок заполнен текстом лишь до середины, а справа пустое место для второго и третьего блоков, уехавших вниз!

При просмотре на узком экране картина та же: сначала идет первый блок, а ниже рядом второй и третий блоки, хотя они должны быть один под другим! При этом первый блок заполнен текстов только на четверть – текст только слева, а остальная часть экрана пустая.

Как все это можно объяснить (и исправить)?

Учить bootstrap и не использовать велосипеды

Такое впечатление, что за пределами bootstrap жизни нет.

Есть, но зачем себе усложнять жизнь? Если уж так приспичило, то лучше покопаться во внутренностях бутстрапа или какого-либо иного фреймворка, например, semantic.js или unsemantic.js. Их тысячи. Да и 960gs никто не отменял.