使用Bootstrap 4订购div

时间:2019-07-03 12:31:23

标签: html bootstrap-4

如果我有2个div,并且要根据屏幕尺寸断点以不同的顺序显示它们,是否必须为每种尺寸指定顺序?例如

<div class="order-xs-2 order-sm-2 order-md-2 order-lg-1 order-xl-1">
<div class="order-xs-1 order-sm-1 order-md-1 order-lg-2 order-xl-2">

当我尝试执行此操作时,它们在xs以外的所有尺寸上均正确显示,这是错误的操作方式,因此我怀疑我做错了。

3 个答案:

答案 0 :(得分:1)

与有效的尺寸不同,没有order-xs

答案 1 :(得分:1)

您只需要设置最小断点,则隐含较大的断点。另外,请记住,订购类使用 flexbox ,因此它们只能在display:flex.row之类的.d-flex父级中工作。

<div class="d-flex">
    <div class="order-2 order-lg-1">div 1</div>
    <div class="order-1 order-lg-2">div 2</div>
</div>

https://www.codeply.com/go/YZVC3UPvoG

-xs在Bootstrap 4中不再使用。最小的断点是默认的,因此它只是order-1order-2等。


另请参阅:What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

答案 2 :(得分:-1)

当前可用尺寸为sm md lg xl,如果您想将订单设置为sm以下,请不要在订购和覆盖之前使用尺寸它具有您想要的大小

示例

<div class="order-sm-2 order-1">
<div class="order-sm-1 order-2">