First we create a container .Box and set width and height. Honestly, it is just for demo i set 80vw and 80vh. And that container should be a flex element with column orientation flex-flow: column wrap;. And we set the max-width of the largest blocks (.BoxItem--large { max-width: 80%; height: 100%; }) 100% of parents height. It is for wrapping the other elements on the new line/column. So elements from another column should fill all space, so we set .BoxItem--small { max-width: 20%; height: auto; } - yes, 80% + 20% == 100%, that the math. lets change behaviour on the low-width screens. @media screen and (max-width: 600px) { .Box { flex-flow: column nowrap; } } we dont need to wrap elements, so just change that. After that we want every BoxItem element to inherit parents width. .BoxItem { width: 100%; max-width: 100%; } max-width: 100%; for cascading, we dont want care about some old rules like .BoxItem--large { max-width: 80%; } and .BoxItem--small { max-width: 20%; }. And set some order changes.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #F72F4E;
overflow: hidden;
}
.Box {
width: 80vw;
height: 80vh;
background-color: rgba(0,0,0,.2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.BoxItem {
background-color: #fff;
border: 1px solid #000;
}
.BoxItem--large {
max-width: 80%;
height: 100%;
}
.BoxItem--small {
max-width: 20%;
height: auto;
}
@media screen and (max-width: 600px) {
.Box {
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.BoxItem {
width: 100%;
max-width: 100%;
}
.BoxItem--large {
height: auto;
}
.BoxItem--1 {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
.BoxItem--2 {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.BoxItem--3 {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit. Dolores ea unde iste esse illo sit, repellat molestias deleniti, voluptas expedita commodi odio possimus amet?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.
