Помогите с flex

Хочу добиться такого поведения:

.column-container { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .column-container div { -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } .row-container .photo { -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 30%; -ms-flex: 0 1 30%; flex: 0 1 30%; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } .row-container { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .row-container div { -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; }

Ссылка
Ссылка
Ссылка

Иванов Иван Иванович

Здесь будет всякая информация

Весь день маюсь - получается невразумительная каша.

Ответ

.box { width: 80px; margin: 5px; } .blue { width: 80px; height: 40px; background: blue; } .red { width: 80px; height: 100px; background: red; } .green { width: 180px; background: green; height: 40px; } .violet { width: 180px; background: violet; height: 100px; } .flex-box{ background: gray; width: 340px; justify-content: center; } .flex-box, .flex-subbox { display: flex; } .flex-subbox { padding: 5px; flex-direction: column; } @media (max-width: 768px) { .flex-box { flex-direction: column; align-items: center; } }