css - Bootstrap 复选框出现在小屏幕上的提交按钮之前

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>