Как правильно установить порядок делений на разных точках останова?

Question

Я использую Bootstrap и хочу добиться следующей договоренности:

Цифры показывают, как я хочу, чтобы эти div были упорядочены в AЕДИНАЯ КОЛОННА на моб.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>

Может кто-нибудь сказать мне, что я здесь делаю неправильно?

Answer 1

Есть 3 подхода:

1. Дублируйте ваши HTML-элементы и соответственно отобразите / скройте их
2. Показывать элементы в виде гибких столбцов и устанавливать фиксированную высоту, чтобы обернуть их
3. Использование column-count

Вариант 1: дубликаты элементов

Самым простым решением было бы дублировать ваши № 2 и № 4 в левой колонке. В режиме одного столбца на мобильном устройстве вы отображаете копии № 2 и № 4 и скрываете правый столбец с помощью d-none. На больших экранах вы скрываете копии # 2 и # 4 с помощью d-md-none, но показывает правый столбец с 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/

Вариант 2: убедитесь, что элементы отображаются как flex-столбец, и используйте перенос

Вы не можете использовать 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;
    }
}

DEMO

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

Этот вариант для меня, похоже, взломан LOL

Вариант 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%;
    }
}

DEMO

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

Answer 2

Самое простое решение ( без дополнительного CSS или дублирующейся разметки ) заключается в использовании «float» в Bootstrap 4. Используйте класс d-md-block для «отключения» flexbox на больших экраны, а затем 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

Answer 3

Если вы сохраняете тот же самый html, вы можете согнуть его как display для parent, а затем установить порядок дочерних элементов. Задание порядка в определенной точке останова с использованием медиазапросов должно помочь.