Не могу выровнять виджеты

Добрый вечер форумчане. На странице есть 6 виджетов. Нужно выровнять 1,2 и 6тую надпись как 2-3-4.

Вот как выровнял я —

@media (min-width: 768px) {
	.promo-product1 aside:nth-child(1) .caption{
		margin-top: 183px;	
		left: -10px;
	}

	.promo-product1 aside:nth-child(2) .caption{
		margin-top: 148px;	
		left: -10px;
	}

	.promo-product1 aside:nth-child(3) .caption{	
		left: -10px;
	}

	.promo-product1 aside:nth-child(4) .caption{	
		left: -10px;
	}

	.promo-product1 aside:nth-child(5) .caption{	
		left: -10px;
		
	}

	.promo-product1 aside:nth-child(6) .caption{	
		left: -160px;
		margin-top: 123px;
		white-space: pre;	
	}
}

Вроде все как красиво.
Но на мобилках все равно все криво. Я думал что используя медиа запрос я не затрону верстку на мобилка. Так и получилось, но все же на мобилках криво.

Возможно я не тот класс правил. Подскажите как сделать правильно!

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]