Center children divs on certain screen width - html

Question

I am trying to make my app responsive. The original css looks like this :
.footer-container {
width: 100%;
min-height: 260px;
height: auto;
background: black;
color: white;
display: flex;
justify-content: center;
flex-wrap: wrap;
position: absolute;
}
The output is this :
But when the screen width reaches 1020px i want them to be underneath eachother.
I tried making the display:flex display:block :
#media only screen and (max-width: 1020px) {
.footer-container {
width: 100%;
min-height: 260px;
height: auto;
background: black;
color: white;
display: block;
text-align: center;
justify-content: center;
position: absolute;
}
}
But that turns out like :
I also tried flex-direction: row but that didn't work either, it practically didnt change a single thing.

Answer 1

Using basic HTML below a solution using a media query. Mobile first and when the screen size exceeds 1024 pixels the media query kicks in.
.footer-container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.contact,
.subscribe,
.follow {
width: 100%;
display: flex;
justify-content: center;
}
#media (min-width: 1024px) {
.footer-container {
flex-wrap: no-wrap;
justify-content: center;
}
.contact,
.subscribe,
.follow {
width: auto;
}
}
<div class="footer-container">
<div class="contact">Contact us</div>
<div class="subscribe">Subscribe</div>
<div class="follow">Follow us</div>
</div>