Как исправить последовательность наложений изображений CSS HTML?

Question

[Voodooas]

Здравствуйте, прошу помочь исправить
Не верно отображается последовательность слоев в мобильной версии, как поменять местами?
Режим ПК

Режим Смартфон


Выгрузил косок блока ХТМЛ и весь файл ЦСС
https://jsfiddle.net/voodooas/h3ga2seL/2/

Answer 1

[Владислав Черненко]

При текущем варианте верстки никак... Переделайте блок NEW абсолютом и будет вам счестье. Сейчас это просто background на родительском блоке.

Answer 2

[Арсений Матыцин]

Так как изображение контентное и подается непосредственно в html напрямую сделать никак, так как стилевые описания в данном кейсе будут идти, как основные, а инлайновые сверху. Собсно таким образом и формируя последовательность. Выйти можно за счет псевдоэлемента, или любого DOM-узла, которое будет спозиционировано по z-index-у выше. Еще интереснее решение — компонент на JS-фреймворке, который будет получать контентную пикчу, как пропс, и управлять последовательностью на уровне рендеринга.