CSS media query and flex direction - html

Question

I am following Traversy course on Udemy, i am less than a month in HTML CSS, so kind of a newbie. So in a section of the course he makes us do a website and in the last episodes he explains how to make it responsive for devices.
This is the problematic section on the html:
<!-- Section: Contact -->
<section id="contact">
<div class="contact-form bg-primary p-2">
<h2 class="m-heading">Contact Us</h2>
<p>Please use the form below to contact us</p>
<form action="">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email">E-mail</label>
<input type="email" name="email" id="email" placeholder="Enter E-mail">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" placeholder="Enter Phone Number">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="message" placeholder="Enter Message"></textarea>
</div>
<input type="sumbit" value="Send" class="btn btn-dark">
</form>
</div>
<div class="map"></div>
</section>
And this is what we did on the main css file:
/* Section: Contact */
#contact {
display: flex;
}
#contact .map, #contact .contact-form {
flex: 1;
}
#contact .contact-form .form-group {
margin: 0.75rem;
}
#contact .contact-form label {
display: block;
}
#contact .contact-form input,
#contact .contact-form textarea {
width: 100%;
padding: 0.5rem;
}
We had to make the map just go under the contact form on the mobile css sheet, but, put simply it worked only when he did it on his computer. on mine the map disappears XD:
#contact {
flex-direction: column;
}
#contact .map {
height: 200px;
}
I tried to workaround:
#contact {
flex-wrap: wrap;
}
#contact .contact-form {
display: block;
}
#contact .map {
display: block;
}
But the same thing happened. Suppose I'm not yet good enough to understand what is happening, let alone fix it myself XD

Answer 1

Just add:
#contact {
display: block;
flex-direction: column;
}