CSS медиа-запрос и гибкое направление

Question

Я слежу за курсом Traversy в Udemy, я меньше месяца в HTML CSS, так что вроде как новичок ie. Таким образом, в разделе курса он заставляет нас делать веб-сайт, а в последних эпизодах он объясняет, как сделать его адаптивным для устройств.

Это проблемный раздел c на 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>

И это то, что мы сделали с основным css файлом:

/* 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;

}

Нам нужно было сделать карту просто go под контактной формой на мобильном телефоне css лист, но, проще говоря, он работал только тогда, когда он сделал это на своем компьютере. на моей карте исчезает XD:

#contact {
    flex-direction: column;
  } 


  #contact .map {

    height: 200px;

  }

Я попытался обойти:

  #contact {
    flex-wrap: wrap;
  }

  #contact .contact-form {
    display: block;
  }

  #contact .map {
    display: block;

  }

Но произошло то же самое. Предположим, я еще недостаточно хорош, чтобы понять, что происходит, не говоря уже о том, чтобы исправить это сам XD

Answer 1

Просто добавьте:

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