Как реализовать гибкий макет по строке/столбцу с 3 элементами для настольных компьютеров/мобильных устройств ⇐ CSS

[Anonymous]

Мне нужно реализовать разные макеты для широких/мобильных экранов. Вот требования:
Широкий макет:

• Элемент №1 имеет ширину растяжения, но 50 % от ширины №1+#2 (в ряду с #2) (высота может быть меньше или больше, чем #2)
• Элемент #2 должен иметь ширину 50 %, но максимальную ширину: 385 пикселей.
• #3 должен иметь ту же ширину, что и #1.

Для мобильных устройств это должен быть простой столбец в порядке 1-2-3 (ширина 100%).
Вот пример широкого макета:

Мобильный макет:

Кажется, что реализовать широкий макет легко, сгруппировав №1 и №3 в один столбец и №2 во второй с помощью flex, но для мобильных устройств эти три элемента должны быть разделены, чтобы разместить №3 ниже. #2
Я понимаю, что это можно реализовать, отрисовав элемент №2 внутри или снаружи №1, но можно ли сделать это по-другому? Используя css/flex или изменив структуру HTML с CSS?
Вот моя попытка использования флексбокса: элемент №3 должен иметь ту же ширину, что и №1 (а №1 может быть выше или ниже чем №2, кстати)
https://jsfiddle.net/v16wxmg7/1/



1




2




3




.wrapper {
background-color: #eee;
display: flex;
flex-flow: row wrap;
div {
height: 40px;
color: white;
}
@media screen and (max-width: 500px) {
flex-direction: column;
}
}
.c1 {
background-color: #900;
flex: 4 1 50%;
@media screen and (max-width: 500px) {
flex: 1 1 100%;
}
}
.c2 {
background-color: #090;
flex: 4 1 50%;

@media screen and (max-width: 500px) {
flex: 1 1 100%;
}
}
.c3 {
background-color: #009;
max-width: 180px;
flex: 0 1 50%;
@media screen and (max-width: 500px) {
flex: 1 1 100%;
max-width: none;
}
}

.e1 {
min-width: 200px;
}
.e2 {
min-width: 150px;
}
.e3 {
width: 300px;
}


Подробнее здесь: https://stackoverflow.com/questions/788 ... top-mobile