Использование flexbox для изменения макета в разных точках останова ⇐ Html

[Anonymous]

Я пытаюсь расположить ряд элементов в разном макете для «мобильных» и больших экранов.

По сути, на мобильных экранах я хочу, чтобы заголовок занимал всю ширину вверху и по центру. Под ним находится изображение и группа иконок справа в одном ряду.

На больших экранах я хочу, чтобы заголовок располагался рядом с изображением в том же столбце, но над значками (желаемые результаты см. на изображении).



Играя с правилами flexbox и свойство порядка, я могу добиться 2/3 этого эффекта. Как я написал, я могу получить заголовок рядом с изображением, но группа значков всегда находится под изображением.

Мою попытку см. в моей скрипке

HTML

Код: Выделить всё

This is my title

[img]https://placem.at/things?w=300&h=400[/img]


[img]http://placehold.it/40x40[/img]

[img]http://placehold.it/40x40[/img]

[img]http://placehold.it/40x40[/img]

[img]http://placehold.it/40x40[/img]

SCSS

Код: Выделить всё

.container {
max-width: 500px;
@media (min-width: 800px) {
max-width: 750px;
}
}
.row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
align-content: flex-start;
}
.title {
width: 100%;
text-align: center;
@media (min-width: 800px) {
flex: 0 0 50%;
order: 2;
text-align: left;
}
}
.icon-section {
padding-left: 20px;
@media (min-width: 800px) {
display: flex;
order: 3;
}
}
.icon {
@media (min-width: 800px) {
margin-right: 5px;
}
}

Я не зациклен на использовании flexbox и могу гибко подходить к разметке. Однако я хочу избежать двух экземпляров моего заголовка и скрытия одного в зависимости от размера экрана. Кроме того, поскольку заголовок будет динамическим, я не могу использовать абсолютное позиционирование.

Подробнее здесь: https://stackoverflow.com/questions/354 ... reakpoints