Сетка Bootstrap 4 не учитывает столбец * в направлении столбца

Question

У меня есть приложение начальной загрузки 4.1.Я пытаюсь расположить набор из 6 карт.

На широком (альбомном) дисплее я хочу отобразить 2 ряда по 3 столбца.

[1] [2] [3]
[4] [5] [6]

Но на узком (портретный)), я хочу отобразить 3 строки по 2 столбца, и я хочу, чтобы карты поддерживали порядок, идущий вниз по столбцу, например:

[1] [4]
[2] [5]
[3] [6]

Проблема, с которой я столкнулся, заключается в том, чточтобы соблюдать col- *, когда сетка находится в направлении столбца, и я получаю это:

[1]
[2]
[3]
[4]
[5]
[6]

Вот моя разметка:

<div class="container">
    <div class="row flex-column flex-md-row">
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 1</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 2</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 3</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 4</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 5</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 6</h5>
            <div class="card-body"></div>
        </div>
    </div>
</div>

На DIV с классом строки япо умолчанию используется flex-column для получения столбчатого направления при узкой ширине.Я переключаюсь в направлении строки в среднем размере.Это похоже на работу.На каждой карте div я по умолчанию выбираю col-6, чтобы получить только два столбца при небольшой ширине, и переключаюсь на col-4 среднего размера, чтобы получить 3 столбца с более широкими дисплеями.

При более широких дисплеях сетка учитывает числоколонн.При узкой ширине ничто не заставляет карты во второй столбец.Какой лучший способ справиться с этим?

Answer 1

У вас есть два подхода для решения этой проблемы:

Первый: упорядочение столбцов

Вы можете удалить класс flex-column из строки, чтобы сохранить поведение по умолчаниюиз столбцов, то вы можете просто изменить порядок каждого столбца с классами order-*, чтобы установить их в любом положении в строке.

Документы начальной загрузки для классов заказа

Второй вариант: установка максимальной высоты на row

С rows равны flex containers, они охватывают всю ширину страницы, если она доступна или определена иным образом, когда вы устанавливаете flex-column, вы в основном поворачиваете строку, и поскольку область просмотра будет расти вместе со страницей, вы должны установить max-height на row, чтобы он знал, когда обернуть его flex-items (в данном случае столбцы) в новый столбец.

.no-order {
   max-height: 300px
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <h1>Without Ordering</h1>
    <div class="row no-order flex-column flex-md-row">
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 1</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 2</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 3</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 4</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 5</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4">
            <h5 class="card-header">Card 6</h5>
            <div class="card-body"></div>
        </div>
    </div>
</div>

<!-- With Ordering -->
<div class="container mt-5">
   <h1>With Column Ordering</h1>
    <div class="row">
        <div class="card col-6 col-md-4 order-1 order-md-1">
            <h5 class="card-header">Card 1</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4 order-3 order-md-2">
            <h5 class="card-header">Card 2</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4 order-5 order-md-3">
            <h5 class="card-header">Card 3</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4 order-2 order-md-4">
            <h5 class="card-header">Card 4</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4 order-4 order-md-5">
            <h5 class="card-header">Card 5</h5>
            <div class="card-body"></div>
        </div>
        <div class="card col-6 col-md-4 order-6 order-md-6">
            <h5 class="card-header">Card 6</h5>
            <div class="card-body"></div>
        </div>
    </div>
</div>

Рабочий пример: https://codepen.io/IvanS95/pen/aQjBdz