Адаптивность на сайтах на сегодняшний момент, как правило, решается единственным способом:
- выстраиваем колонки для обычных разрешений (например более 960px);
- для средних разрешений колонки становятся «резиновыми»;
- для малых экранов сбрасываем float, после чего все ячейки следуют одна под другой.
Посмотрите на демо-примере, где используется именно такой подход. Изменяя ширину браузера можно увидеть как меняются ячейки.
Способ достаточно простой, поэтому получил широкое распространение. Вместе с тем, очевидно, что в нем существуют большие ограничения, связанные с тем, что модель поведения блоков сетки фиксирована и не предполагает более сложной организации, например для средних экранов сделать не только резиновую ширину, но и расположить ячейки попарно «1-2» и «3-4».