如何在不同的断点处正确设置div的顺序？

时间：2019-03-14 20:47:03

标签： html css bootstrap-4

我正在使用Bootstrap，并且希望实现以下安排：

Numbers indicate how they should be ordered in a column on mobile.

数字表示我希望如何在移动设备上的单列中对这些div进行排序。我尝试过的HTML在这里：

<div class="col-xs-12">
<div class="flex-row">
    <div class="col-md-6">
        <div class="order-1">
            <!-- TITLE SUBTITLE -->
        </div>
        <div class="order-md-3">
            <!-- FILM META AND CONTENT -->
        </div>
    </div>

    <div class="col-md-6">
        <div class="order-md-2">
            <!-- FILM POSTER -->
        </div>
        <div class="order-md-4">
            <!-- UNDER POSTER. -->
        </div>
    </div>
</div>

有人可以告诉我我在做什么错吗？

3 个答案:

答案 0 :(得分：2)

您可以使用3种方法：

  1. 复制您的HTML元素并相应地显示/隐藏它们
  2. 将项目显示为弹性列并设置固定高度以使其包裹起来
  3. 使用column-count

选项1：重复元素

最简单的解决方案是将＃2和＃4复制到左列。在移动设备上的单列模式下，您将显示＃2和＃4的副本，并使用d-none隐藏右列。在更大的屏幕上，您用d-md-none隐藏＃2和＃4的副本，但用d-md-block显示右列。

HTML 

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="card section-1">
                <div class="card-body">
                    <h6 class="card-title">
                        TITLE SUBTITLE
                    </h6>
                    <p>1</p>
                </div>
            </div>
            <div class="card section-2 d-md-none">
                <div class="card-body">
                    <h6 class="card-title">
                        COPY OF FILM POSTER
                    </h6>
                    <p>COPY OF 2</p>
                </div>
            </div>
            <div class="card section-3">
                <div class="card-body">
                    <h6 class="card-title">
                        FILM META AND CONTENT
                    </h6>
                    <p>3</p>
                </div>
            </div>
            <div class="card section-4 d-md-none">
                <div class="card-body">
                    <h6 class="card-title">
                        COPY OF UNDER POSTER
                    </h6>
                    <p>COPY OF 4</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 d-none d-md-block">
            <div class="card section-2">
                <div class="card-body">
                    <h6 class="card-title">
                        FILM POSTER
                    </h6>
                    <p>2</p>
                </div>
            </div>
            <div class="card section-4">
                <div class="card-body">
                    <h6 class="card-title">
                        UNDER POSTER
                    </h6>
                    <p>4</p>
                </div>
            </div>
        </div>
    </div>
</div>

演示

https://jsfiddle.net/davidliang2008/L2cwf4z3/11/

enter image description here

enter image description here

选项2：确保项目显示为弹性列并使用包装

如果项目不在同一行/同一列中，则不能使用order。这就是为什么您的方法不起作用的原因。但这就是导致此选择＃2的原因。

在这里，我将容器设置为在大屏幕上显示为d-md-flex和flex-md-column，并确保将其包装为flex-md-wrap！由于它显示为flex列，因此要对其进行包装，我们需要在容器上设置固定高度。

HTML 

<div class="container d-md-flex flex-md-column flex-md-wrap">
    <div class="card section-1">
        <div class="card-body">
            <h6 class="card-title">
                TITLE SUBTITLE
            </h6>
            <p>1</p>
        </div>
    </div>
    <div class="card section-2">
        <div class="card-body">
            <h6 class="card-title">
                FILM POSTER
            </h6>
            <p>2</p>
        </div>
    </div>
    <div class="card section-3">
        <div class="card-body">
            <h6 class="card-title">
                FILM META AND CONTENT
            </h6>
            <p>3</p>
        </div>
    </div>
    <div class="card section-4">
        <div class="card-body">
            <h6 class="card-title">
                UNDER POSTER
            </h6>
            <p>4</p>
        </div>
    </div>
</div>

CSS 

@media (min-width: 768px) {
    .container {
        height: 40rem;
    }

    .card {
        width: 45%;
    }

    .section-3 {
        order: 2;
    }

    .section-2 {
        order: 3;
    }

    .section-4 {
        order: 4;
    }
}

演示

https://jsfiddle.net/davidliang2008/ypvngd7w/32/

enter image description here

虽然我笑了，但这个选项对我来说就像是骇客

选项3：列数

您可以利用CSS3 column-count功能！我认为这是最干净的方法！

由于使用column-count，您无法更改项目的顺序，因此您必须先预先安排项目。因此，＃3必须排在＃2之前。

在较小的屏幕上，您将必须将它们显示为flex-column，因为您想使用Order将项目排列为1,2,3,4。

HTML 

<div class="container">
    <div class="card section-1">
        <div class="card-body">
            <h6 class="card-title">
                TITLE SUBTITLE
            </h6>
            <p>1</p>
        </div>
    </div>
    <div class="card section-3">
        <div class="card-body">
            <h6 class="card-title">
                FILM META AND CONTENT
            </h6>
            <p>3</p>
        </div>
    </div>
    <div class="card section-2">
        <div class="card-body">
            <h6 class="card-title">
                FILM POSTER
            </h6>
            <p>2</p>
        </div>
    </div>
    <div class="card section-4">
        <div class="card-body">
            <h6 class="card-title">
                UNDER POSTER
            </h6>
            <p>4</p>
        </div>
    </div>
</div>

CSS 

.card {
    text-align: center;
    margin-bottom: 1rem;
}

.container {
    display: flex;
    flex-direction: column;
}

.section-2 {
    height: 20rem;
    order: 2;
}

.section-3 {
    height: 18rem;
    order: 3;
}

.section-4 {
    order:4;
}

@media (min-width: 768px) {
    .container {
        display: block;
        column-count: 2;
    }

    .card {
        display: inline-block;
        width: 100%;
    }
}

演示

https://jsfiddle.net/davidliang2008/ve96jx42/9/

enter image description here

答案 1 :(得分：1)

最简单解决方案（没有额外的CSS或重复的标记）是在Bootstrap 4中使用“浮点数”。使用d-md-block类“禁用”在更大的屏幕上，然后在float-*中定位列。在移动设备上，列将遵循其自然顺序... 

      <div class="row d-md-block d-flex">
            <div class="col-md-6 float-left py-2">
                <div class="border">
                    1
                </div>
            </div>
            <div class="col-md-6 float-right py-2">
                <div class="border taller">
                    2 FILM POSTER
                </div>
            </div>
            <div class="col-md-6 float-left py-2">
                <div class="border taller">
                    3 FILM META AND CONTENT
                </div>
            </div>
            <div class="col-md-6 float-left py-2">
                <div class="border">
                    4
                </div>
            </div>
      </div>

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

答案 2 :(得分：0)

如果保留相同的html，则可以将显示方式灵活显示为父级，然后设置子级的顺序。使用媒体查询在特定的断点设置顺序即可完成工作。

相关问题
最新问题