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

[Anonymous]

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

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

на больших экранах я хочу, чтобы заголовок был прилегает к изображению в том же столбце, но над значками (см. Изображение для желаемых результатов).
< img alt = "Введите описание изображения здесь" src = "https://i.sstatic.net/psxxh.png"/>

, играя с правилами Flexbox и Свойство заказа, я могу достичь 2/3 этого эффекта. То, как я написал, я могу получить заголовок рядом с изображением, но группа значков всегда находится под изображением. < /p>

См. Мою скрипку для моей попытки < /p>

html < /p>



This is my title














< /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