divs будут одинаковыми как для мобильных, так и для настольных компьютеров

Question

Я пытаюсь сделать так, чтобы два дива появлялись в одном ряду на рабочем столе, и один под другим в мобильном представлении.Но он отображается в одном ряду как в настольном, так и в мобильном виде.И когда я пытаюсь использовать col-xs- * для достижения того же, это не работает.Я использую Bootstrap 4.

<section class="pb_section pt-0 pb-0" id="section-contact">
      <div class="d-flex">
        <div class="pb_half py-5">
          <div class="row justify-content-center mb-5">
            <div class="col-md-10 text-center">
              <h2 class="mb-4 text-uppercase pb_letter-spacing-2">Write us</h2>
            </div>
          </div>
          <div class="row justify-content-md-center">
            <div class="col-md-7">
              <form action="#">
                <div class="row">
                  <div class="col-md">
                    <div class="form-group">
                      <label for="name">Name</label>
                      <input type="text" class="form-control p-3 rounded-0" id="name">
                    </div>
                  </div>
                  <div class="col-md">
                    <div class="form-group">
                      <label for="email">Email</label>
                      <input type="text" class="form-control p-3 rounded-0" id="email">
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="message">Message</label>
                  <textarea cols="30" rows="10" class="form-control  p-3 rounded-0" id="message"></textarea>
                </div>
                <div class="form-group">
                  <input type="submit" class="btn pb_outline-dark pb_font-13 pb_letter-spacing-2  p-3 rounded-0" value="Send Message">
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="pb_half" id="map">

        </div>
      </div>

    </section>

Answer 1

<section class="pb_section p-5" id="section-contact">
        <div class="row justify-content-center mb-5">
            <h2 class="mb-4 text-uppercase pb_letter-spacing-2">Write us</h2>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-7">
                <form action="#">
                    <div class="row">
                        <div class="col-md">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control p-3 rounded-0" id="name">
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="text" class="form-control p-3 rounded-0" id="email">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea cols="30" rows="10" class="form-control  p-3 rounded-0" id="message"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn pb_outline-dark pb_font-13 pb_letter-spacing-2  p-3 rounded-0" value="Send Message">
                    </div>
                </form>
            </div>
        </div>
    </section>

Answer 2

Похоже на проблему с редактором переполнения стека. Можете ли вы попробовать запустить скрипту "https://jsfiddle.net/1w02ngym/5/". Проблема с кодом заключается в том, что вы должны использовать структуру столбца с" pb_half "divs.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">


  <section class="pb_section pt-0 pb-0" id="section-contact">
    <div class="row">
      <div class="pb_half py-5 col-lg-6">
        <div class="row justify-content-center mb-5">
          <div class="col-md-10 text-center">
            <h2 class="mb-4 text-uppercase pb_letter-spacing-2">Write us</h2>
          </div>
        </div>
        <div class="row justify-content-md-center">
          <div class="col-md-7">
            <form action="#">
              <div class="row">
                <div class="col-md">
                  <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control p-3 rounded-0" id="name">
                  </div>
                </div>
                <div class="col-md">
                  <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" class="form-control p-3 rounded-0" id="email">
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label for="message">Message</label>
                <textarea cols="30" rows="10" class="form-control  p-3 rounded-0" id="message"></textarea>
              </div>
              <div class="form-group">
                <input type="submit" class="btn pb_outline-dark pb_font-13 pb_letter-spacing-2  p-3 rounded-0" value="Send Message">
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="pb_half col-lg-6" id="map">
        <h1>
          This is Map
        </h1>
      </div>
    </div>

  </section>
</div>

Вернуть, если у вас есть другие проблемы