Абсолютное позиционирование и @media

Добрый день! Столкнулся с проблемой абсолютного позиционирования для media запросов

Для адаптивного дизайна предусмотрены такие вот блоки:

Я вырезал картинки без текста и кнопок, текст и кнопки я разместил абсолютно, поверх img, естественно при уменьшении окна браузера пропорции картинки уменьшаются и все абсолютные элементы уплывают в разные стороны и это становится очень некрасиво. я так понимаю я пошел не той дорогой. В html это выглядит вот так:

<div class="mob1 mob_box2"> 
		<img src="img/mob2.png" class="img-responsive" alt=""> 
		  <p>PCI DSS 3.2 Avenue</p> 
		<button>Learn more </button> 
</div>

Как я уже понял, я пошел не той дорогой... Прошу подсказать, как лучше реализовать live text поверх такого фона и стоит ли отдельно нарезать иконки?