媒体查询，如何在不更改HTML的情况下更改<div>位置

Question

媒体查询问题：如何更改div位置而不更改HTML ，仅限CSS。 在移动版本中，我希望联系表单包含所有输入，右侧按钮<div class="contact__form">位于地图上方。

以下情况链接到codepen：https://codepen.io/RakuRak/pen/oEGaBw

#map {
  width: 100%;
  z-index: 0;
  position: absolute;
  height: 100%;
  top: 0;
}

.contact {
  z-index: 1;
  position: relative;
  height: 600px;
  border-top: 3px solid #3EAC37;
}

.contact__bottomBar {
  position: absolute;
  left: 10px;
  bottom: 10px;
  height: 50px;
  background: rgba(255,255,255,0.85);
  width: calc((100% / 3) * 2 - 30px);
  text-align: center;
  line-height: 50px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}

.contact__form {
  background: rgba(255,255,255,0.85);
  box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
  width: calc(100% / 3);
  float: right;
  height: calc(100% - 20px);
  position: relative;
  z-index: 1;
  padding: 20px;
  margin-right: 10px;
  margin-top: 10px;

  .button {
    display: block;
    background: #fff;
    text-transform: uppercase;
    font-size: 20px;
    color: #3EAC37;

    i {
      color: rgba(0,0,0,0.7);
      padding-top: 5px;
      padding-right: 6px;
    }

    &:last-of-type {
      margin: 0;
    }
  }

  label {
    text-align: left;
    display: block;
    margin-bottom: 4px;
  }

  .form-horizontal {
    background: #f5f5f5;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    padding: 10px;

    .form-group {
      margin-bottom: 20px;

      &:last-of-type {
        margin-bottom: 10px;
      }
    }

    h4 {
      margin-bottom: 20px;
    }

    input, textarea {
      border: 1px solid #bbb;

      &:active, &:focus {
        border-color: #3EAC37;
        box-shadow: 0 0 0 0.2rem rgba(62, 172, 55,.25)
      }
    }

    .btn {
      display: block;
      width: 200px;
      margin: 0 auto;
    }
  }

  textarea {
    min-height: 62px;
  }
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact" class="contact">
    <div id="map"></div>
    <div class="contact__bottomBar">
      <i class="fas fa-map-marker-alt fa-md"></i> Lorem ipsum
    </div>
    <div class="contact__form">
      <div class="button">
        <i class="fas fa-phone-square fa-lg"></i><a class="link" href="tel:00000000">00 00 00 00</a>
      </div>
      <div class="contact__separator"></div>
      <div class="button">
        <i class="fas fa-envelope-square fa-lg"></i><a class="link" href="mailto:lorem@ipsum.net.com" target="_top">lorem@ipsum.net.com</a>
      </div>
      <div class="contact__separator"></div>
      <form action="https://formspree.io/lorem@gmail.com" method="post" class="form-horizontal">
        <h4>Napisz do nas</h4>
        <div class="form-group">
          <label for="user-name" class="control-label">Imię</label>
          <input name="name" type="text" class="form-control" id="user-name" placeholder="Wpisz swoje imię/nazwę firmy">
        </div>
        <div class="form-group">
          <label for="user-email" class="control-label">Email</label>
          <input name="email" type="email" class="form-control" id="user-email" placeholder="Wpisz swój Email">
        </div>
        <div class="form-group">
          <label for="user-message" class="control-label">Wiadomość</label>
          <textarea name="user-message" id="user-message" class="form-control"></textarea>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-success">Wyślij</button>
        </div>
      </form>
    </div>
  </section>

Answer 1

您需要使用媒体查询。

@media screen and (max-width: 767px) {
  .contact__form {
    width: 100%; // Whatever you want
  }
}

Answer 2

我在第一个地方改变了帖子，在CSS下面移动版本：

  #map {
    // width: 100%;
    // z-index: 0;
    position: relative; //absolute//
    height: 100%;
    top: 0;
  }
  
  .contact__bottomBar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 50px;
    background: rgba(255, 255, 255, 0.85);
    width: auto;
    text-align: center;
    line-height: 50px;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}

  .contact {
    // z-index: 1;
    // position: relative;
    height: 600px;
    border-top: 3px solid #3EAC37;
  }
  
  .contact__form {
    background: rgba(255,255,255,0.85);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
    width: 100%;
    // float: right;
    // height: calc(100% - 20px);
    // position: relative;
    // z-index: 1;
    padding: 20px;
    margin-right: 10px;
    margin-top: 10px;
  }

  footer {
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    height: 40px;
    line-height: 40px;
    /* bottom: 0px; */
    /* margin-bottom: -13px; */
    margin-top: 600px;
    color: #fff;
    position: relative;
}