Question

我连续有四个尺寸不同的物品。在超大屏幕上，一切看起来都很好。但是当我打大屏幕（1199.98px / bootstrap'lg'）时，我需要重新排序div项。

第三个div必须是最后一个。我还为此制作了一支密码笔

<!-- https://codepen.io/ibrahim-kunushefci/pen/OKJWzq -->

.hotelPr,
.hotelPr2,
.hotelPr3 {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #3161a3;
    border: 2px solid black;
}

.custom {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #bbbbbb;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
    <div class="col-xl-2 col-lg-4">
        <div class="hotelPr">
            <p>Hotel</p>
        </div>
    </div>

    <div class="col-xl-2 col-lg-4">
        <div class="hotelPr2">
            <p>Hotel</p>
        </div>
    </div>

    <div class="col-xl-5 col-lg-10">
        <div class="custom">
            <p>This needs to be the last on small, medium and large screens. But not in extra large</p>
        </div>
    </div>

    <div class="col-xl-3 col-lg-4">
        <div class="hotelPr3">
            <p>Hotel</p>
        </div>
    </div>
</div>

Answer 1

将d-flex添加到您的row容器中：

将order-1 order-xl-0添加到您需要重新排序的列中

Answer 2

您可以在父级flexbox元素上指定显示的兄弟姐妹的顺序。

我更改了Flexbox中.row div的显示，并向order div添加了col-xl-5属性。

.row{
  display: flex;
}

.hotelPr,
.hotelPr2,
.hotelPr3 {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #3161a3;
    border: 2px solid black;
}

.custom {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #bbbbbb;
}

.col-xl-5{
  order: 1; /* here */
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
    <div class="col-xl-2 col-lg-4">
        <div class="hotelPr">
            <p>Hotel</p>
        </div>
    </div>

    <div class="col-xl-2 col-lg-4">
        <div class="hotelPr2">
            <p>Hotel</p>
        </div>
    </div>

    <div class="col-xl-5 col-lg-10">
        <div class="custom">
            <p>This needs to be the last on small, medium and large screens. But not in extra large</p>
        </div>
    </div>

    <div class="col-xl-3 col-lg-4">
        <div class="hotelPr3">
            <p>Hotel</p>
        </div>
    </div>
</div>

遇到自定义断点时重新排序商品

2 个答案: