How can I achieve my design requirements using flexbox?
The current code that I have implemented follows the flexbox approach to meet the design requirements. However, the output of this code does not match the screenshot of my design requirements. I am seeking guidance on how to make adjustments to achieve the desired outcome.
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
display: block;
}
.item:nth-child(1) {
background: green;
}
.item:nth-child(2) {
background: red;
}
.item:nth-child(3) {
background: blue;
margin-left: auto;
}
@media screen and (max-width: 720px) {
.container {
flex-wrap: wrap;
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
margin-left: calc(100% - 200px); /* 200px is width of 2 boxes */
}
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
The current output generated by the code above can be viewed here: flex output