Есть ли способ создать разные макеты гибких блоков с одним родителем и тремя дочерними элементами? ⇐ CSS

[Гость]

Есть ли способ добиться приведенного ниже макета для маленьких/больших экранов, используя гибкий блок только с одним родительским и тремя дочерними элементами?

.родитель { дисплей: гибкий; flex-wrap: обертка; } .зеленый { ширина: 10рем; высота: 10рем; цвет фона: светло-зеленый; } .розовый { гибкий рост: 1; цвет фона: розовый; } .фиолетовый { гибкий рост: 1; цвет фона: фиолетовый; }







Приведенный выше код подходит для небольшого макета. Однако для большого макета я могу думать только о том, чтобы сделать это по-старому, используя float, что кажется уродливым решением, а не реальным решением.
.parent { дисплей: блок; } .зеленый { ширина: 10рем; высота: 10рем; цвет фона: светло-зеленый; плыть налево } .розовый { поле слева: 10рем; цвет фона: розовый; } .фиолетовый { поле слева: 10рем; цвет фона: фиолетовый; }