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

[Anonymous]

Я пытаюсь организовать серию элементов в другой макете для «мобильных» экранов против больших экранов. < /p>

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

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














< /code>

scss < /p>

.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;
}
}
< /code>

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

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