Флажок начальной загрузки, появляющийся перед кнопкой отправки на маленьких экранах

Question

Я пытался найти решение для этого, но не смог.

У меня есть установка, в которой три поля ввода и кнопка отправки отображаются рядом друг с другом на больших экранах, но они заключены в <div class="col-sm"> для вертикальной укладки на мобильном устройстве. Однако мне нужно, чтобы перед маленькими экранами перед кнопкой отправки отображался флажок, но на большом экране хорошо показывать его под полями ввода.

            <form method="post">
              <div class="row">
                <div class="col-sm">
                  <input id="email" name="email" type="text" class="required email form-control form-rounded" placeholder="Email">
                </div>
                <div class="col-sm">
                  <input type="text" class="form-control form-rounded" placeholder="Number">
                </div>
                <div class="col">
                  <input name="comp" id="comp" type="text" class="form-control form-rounded" placeholder="Company">
                </div>                  
                <div class="col-sm">
                  <input type="submit" name="submit" id="subscribesubmit" class="button btn-block" value="Sign up">
                </div>
              </div>
              <div id="contactconsent" class="d-flex justify-content-center margin-top-small">
                  <input type="checkbox" name="consent" id="contactconsentcheck">
                  <label class="checkbox-inline" for="contactconsentcheck">
                    Lorem ipsum dolor sit amet
                  </label>
                </div>
            </form>

Я хотел кое-что по поводу манипулирования полями в медиазапросе, но это похоже на плохое решение. Есть предложения?

Спасибо

Answer 1

Попробуйте что-нибудь подобное.Не забудьте нажать кнопку «Полная страница» и нажать «Запустить фрагмент кода», чтобы изменить размер демонстрационного окна.

.my-form {
  display: flex;
}

input {
  margin: 0;
}

.text-fields {
  flex-direction: row;
}

.text {
  margin-bottom: 4px;
  width: 200px;
  height: 22px;
}

.submit-btn {
  margin-left: 10px;
  width: 80px;
  height: 30px;
}

@media screen and (max-width: 767px) {
  .my-form {
    flex-direction: column;
  }
  
  .text-fields {
    display: flex;
    flex-direction: column;
  }

  .submit-btn {
      margin-left: 0;
  }
}

<form class="my-form">
  <div class="inputs">
    <div class="text-fields">
      <input class="text" type="text">
      <input class="text" type="text">
      <input class="text" type="text">
    </div>
    <input type="checkbox">
  </div>
  <input class="submit-btn" type="submit" value="Submit">
</form>