Приветствую.
Если я не ошибаюсь то в гридах как и во флексах есть order поманипулируй в первую очередь тут.
Исходя из вышесказанного сразу оговорюсь на гридах не верстаю, хотя опыт у меня большой, я люблю новые технологии тут считаю гриды оверхед. Попробую по сути твоей задачи. Готовое решение, сорян не предоставлю просто нет времени. Что вижу сразу раскладка реализуема через граммотно построенный layot через flex мобильная flex order column сердечко под фото posa > posr c order. Как и в остальных версиях там манипуляция flex-flow: row, order, и так далее. Если сложно и есть завтык, берешь пустое полотно и делаешь с нуля, не в текущем проекте, а просто в пустом.
Еще как решение, когда дизайнер перемудрил, а не все дизайнеры знают что css is awesome, стараюсь с ним связаться и найти компромисс.
В целом задача выполнима.