In this example, we change the percentage of flex to create different layouts for different screen sizes, changing from two columns to one stacked column.
Resize the browser window to see that the direction changes to vertical when the screen size is less than 800px.
Right-click and choose View Source to see all code, such as,
section {display: flex; flex-wrap: wrap;}
.flex-item-left {color:#FFF; font-size:1.5em; padding:10px; flex:100%; background-color:dodgerblue;}
.flex-item-right {padding:10px; flex:100%; background-color:#f1f1f1;} /* light grey */
@media (min-width: 800px) {
.flex-item-left {flex: 30%; text-align:right;}
.flex-item-right{flex: 70%;}
}
Be sure to use your site Navigation, your site Header and Footer, and link all pages to the same CSS file.