I'm feeling a bit overwhelmed with this flexbox assignment I need to complete.
The desired outcome should resemble the image here: https://i.sstatic.net/XKvPk.jpg When the screen is at or below 600px, the two blue squares should move beneath the red square. The text content must remain unchanged. The container's standard size is 600px by 500px and needs to be centered. For reference, please check out the codepen link provided: https://codepen.io/anon/pen/RQrmvE
* {
box-sizing: border-box
}
.flexbox {
margin:auto;
}
.flexbox {
width: 600px;
max-width: 100%;
height: 500px;
background-color: black;
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
font-size:3em;
}
.flex-item {
width: 100px;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
#flex-item-1 {
background-color: yellow;
height: 100px;
margin-top:20px;;
width:260px;
}
#flex-item-2 {
background-color: green;
height: 100px;
margin-top:20px;
width:260px;
}
#flex-item-3 {
background-color: red;
height: 350px;
width:350px;
margin-left:14px;
word-wrap:break-word;
}
#flex-item-4 {
background-color: skyblue;
height: 80px;
width:150px
}
#flex-item-5 {
background-color: skyblue;
height: 80px;
align-self:flex-start;
margin-bottom:20px;
}