Css 在小屏幕上提交按钮之前显示引导复选框

我曾试图找到一个解决方案，但一直未能找到

我有一个设置，三个输入字段和一个提交按钮在大屏幕上相邻显示，但它们被包装在

中，以便在移动设备上垂直堆叠。但是，我需要在小屏幕上的submit按钮之前显示一个复选框，但是在大屏幕上，可以在输入字段下面显示它

            <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>

Lorem ipsum dolor sit amet

我想在mediaquery中操纵边距，但感觉这是一个糟糕的解决方案。有什么建议吗

---

谢谢

试试这样的东西。确保单击“完整页面”按钮，然后单击“运行代码段”，以便调整演示窗口的大小

。我的表单{
显示器：flex；
}
输入{
保证金：0；
}
.文本字段{
弯曲方向：行；
}
.文本{
利润底部：4倍；
宽度：200px；
高度：22px；
}
.提交btn{
左边距：10px；
宽度：80px；
高度：30px；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.我的表格{
弯曲方向：立柱；
}
.文本字段{
显示器：flex；
弯曲方向：立柱；
}
.提交btn{
左边距：0；
}
}

请发布代码我们需要进行设置，以复制您所拥有的，以便我们可以帮助您。根据您的描述，您应该看看网格系统。它独立于HTML结构，HTML结构可以按语义编写，不需要更改。但是用mediaqueries解决这个问题并不是一个坏的解决方案。只需避免使用JS操纵HTML语法即可。正如@ZimSystem所述，您需要包含代码，以便重现您的问题。这里有一个关于如何表达问题的指南链接。希望有帮助！我想你在找订单，谢谢。在您的示例中，它非常有效，但我无法使它正常工作。也许我需要更多地使用它。使用这种方法，最好避免使用任何引导列类。