如何在 Bootstrap 中忽略移动设备上的"order"类

Question

有没有办法在大屏幕上忽略order类?

我有两个输入，标签是这样的;

<div class="row">
<div class="col-12 col-md-5 order-first order-md-5"><label class="form-label">Label for 1st input <small>(Explanation for first input)</small></label></div>
<div class="col-12 col-md-5 offset-md-2 order-last order-md-10"><label class="form-label">Label for 2n input<small>( Explanation for second input )</small></label></div>
<div class="col-12 col-md-5 order-first order-md-5">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
<div class="col-12 col-md-2 align-self-center">
<p class="form-group text-center mt-3">and/or</p>
</div>
<div class="col-12 col-md-5 order-last order-md-10">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
</div>

它们就像我希望它们在移动设备上一样工作，然而，我需要它们看起来像之前一样，我已经添加了看起来像

的订单类

<div class="row">
<div class="col-12 col-md-5"><label class="form-label">Label for 1st input <small>(Explanation for first input)</small></label></div>
<div class="col-12 col-md-5 offset-md-2"><label class="form-label">Label for 2n input<small>( Explanation for second input )</small></label></div>
<div class="col-12 col-md-5">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control"  placeholder="">
</div>
</div>
<div class="col-12 col-md-2 align-self-center">
<p class="form-group text-center mt-3">and/or</p>
</div>
<div class="col-12 col-md-5">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
</div>

手机上的顺序是正确的，就像我想要的那样，但它打破了桌面的顺序。对我来说，没有订单类的订单在桌面上是完美的，但它破坏了移动订单。是否有一种方法可以只在手机上激活订单类?

Answer 1

尝试添加像。order-1这样的类，而不是order-first，希望所有相关的类都能为您工作。