Проблема с плавающими блоками

[senrize]

Здравствуйте. Подскажите, возможно ли реализовать вертикальное обтекание блоков средствами CSS, как показано на рисунке.

сейчас страница выглядит следующим образом:

html:

<div class="hlist">
    <a class="name" href="#">Link 1</a>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </p>
</div>
...

css:

.hlist {
	background: #eee;
	border: 1px solid #ddd;

	display: block;
	float: left;

	padding: 10px 10px 8px 10px;
	width: 200px;
}

P.S. Я понимаю, что можно сделать по отдельному контейнеру под каждую колонку или фиксированную высоту у каждого элемента, но это не варианты для текущей задачи... Может кто-нибуть сталкивался с подобной задачей,

[USF]

А меньшие по высоте всегда будут справа от больших? Просто float: left не поможет, так как обтекается до первого элемента большего по высоте.

могу предложить использовать display:inline-block. будет как-то так http://jsfiddle.net/8MQt8/

[senrize]

Да, я тоже рассматривал вариант с inline-block, но там та же проблема - нижние блоки находятся не в плотную к верхним... Я подозреваю, что тут можно использовать для решения только стобцы. Вся соль в том, что я делаю "отзывчивую" верстку, в которой элементы на десктопе и мобиле должны располагаться в одинаковом порядке, т.е. на десктопе это сетка элементов, а на мобиле - линейный список блоков. В случае столбцов порядок теряется. Наверное, буду скриптом отслеживать viewport и при малом разрешении просто убирать столбцы...