Responsive Flexbox

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.

Education
2022-2023 State College of Florida
   Computer Science Major
   3.8 GPA
Employment
2020-2022 McDonalds
   Work Cash Register, Close Store
   Take Inventory, deal with Public