Flex - ułożenie div

Question

Witam..All,

Obecnie mam rozwiązanie ze zmianą div w @media (max-width:600px) ale "czuję" że nie jest ono zbyt poprawne - chodzi o sposób zagnieżdżenia div, dlatego chciałbym poprosić o pomoc.

Graficznie przedstawia się to tak : Przykład z div -/ czerwony i czarne bordery są przykładowe tylko tu. /

Warstwy mają zagnieżdżać się w takiej kolejności:
[normalnie]
kreskowe (czerwona) - w tej
article2 - (zielona)
hit (siwa)
licznik (niebieska)
social (orange)
ewentualnie jeszcze jedna ukryta? zapasowa  warstwa display {hidden/ visible}

[ @media max 700/600 px] (landscape  / portrait)

kreskowe (czerwona) - w tej
obok zielonej - siwa
licznik (niebieska)
social (orange)
ewentualnie jeszcze jedna ukryta? zapasowa  warstwa display {hidden/ visible}

W @media (max-width:600px) wszystkie mają jednakową szerokość warstwy zaznaczonej czerwono.

W @media (max-width:700px) div zielony+siwy się rozciąga - "blue i orange" mają treść "center" i też się rozciągają do czerwonej.

Czuję że tak "na siłę - dla idei" zamieszałem coś z warstwami nie bardzo radząc sobie z flex-em. 
Proszę o sugestie do tego flex-a jak powinno być to prawidłowo. W razie konieczności służę fragmentem kodu html i css.

Pozdrawiam