Вы используете позицию: absolute; что может сделать вещи слишком сложными для гибкого дизайна. Вы смотрели в гибкую коробку ?:
http://www.html5rocks.com/en/tutorials/flexbox/quick/
Или вы можете также использовать «поплавок» с процентными ширин. Это позволит вашему контенту масштабироваться, но по-прежнему сохраняет один и тот же макет (без нажатия на разные строки и т. Д.). Затем, когда вы получаете действительно небольшую ширину, вы можете использовать медиа-запросы CSS3 для привязки к другому макету.
В целом рекомендуется сначала начать с мобильного/наименьшего расположения, а затем наращивать, а не наоборот.