I currently have a footer displayed on the desktop version of my website, which appears like this:
https://i.sstatic.net/ZMUZj.png
However, for tablets (with a width less than or equal to 960px), I need to adjust the layout using media queries to look like this:
https://i.sstatic.net/G01oI.png
The challenge lies in arranging the divs without resorting to using empty ones.
Here is the code snippet for the desktop version:
jsx:
<footer>
<div className="footer-content">
<div className="col">1</div>
<div className="col">2</div>
<div className="col">3</div>
<div className="col">4</div>
<div className="col">5</div>
</div>
<div className="another-stuff">
another stuff
</div>
</footer>
and css:
.footer-content {
display: flex;
justify-content: space-between;
margin-bottom: 7%;
}
.col {
display: flex;
flex-direction: column;
}
Attempted to implement:
.footer-content{
display: flex;
flex-wrap: wrap;
}
.footer-content .col {
flex: 1 0 33%;
}
Yet, elements 4 and 5 ended up misplaced in the center of the page.