Combine it with width conditions

01 / 05

You have two tools now

"Switch by width" from the advanced part, and "the parent arranges" from this chapter. The two stack straight on top of each other.

You just write display: flex; or flex-wrap inside @media. Nothing new to learn.

02 / 05

On a wide screen you want one line. On a narrow one you want it to wrap. For that, put flex-wrap inside @media.

.cards {  display: flex;}@media (max-width: 670px) {  .cards {    flex-wrap: wrap;  }}

03 / 05

Both ends when wide, the middle when narrow. Changing the value of justify-content per width alters the impression a good deal.

Decide what to change one thing at a time. Change everything and nobody can read it.

.header {  display: flex;  justify-content: space-between;}@media (max-width: 670px) {  .header {    justify-content: center;  }}

04 / 05

Allow wrapping and then make the children width: 100%; and you get an arrangement that looks like one stacked above another.

Borrowing the power of wrapping to stack things is a common shape.

@media (max-width: 670px) {  .card {    width: 100%;  }}

05 / 05

Going back and forth across the dividing line in the preview and watching the moment it switches is the best way to check.

Have a go.