Responsive Flexbox
You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices.
For example, if you want to create a two-column layout for most screen sizes, and a one-column layout for small screen sizes (such as phones and tablets), you can change the flex-direction from row to column at a specific breakpoint (800px in the example below):
Example
.flex-container { display: flex; flex-direction: row; }/* Responsive layout - makes a one column layout instead of a two-column layout */ @media (max-width: 800px) { .flex-container { flex-direction: column; } }