Матрица 2 x 2 на средних и больших матрицах, матрица 4 x 1 на небольших устройствах

Question

Интересно, как получить следующий макет.

На средних и больших устройствах я хотел бы иметь макет с 2 строками и 2 столбцами (матрица 2 x 2).

Вкл.маленькие (и очень маленькие) устройства или при изменении размера на маленькое, я хотел бы иметь 4 строки и одну матрицу столбцов.

Я проиллюстрирую это через ascii.

1) 2Матрица x 2 (средняя и большая):

(b1)    (b2)
____________

r1c1    r1c2
r2c1    r2c2

2) Матрица 4 x 1 (малая и очень маленькая):

(b1)
r1c1
r2c1
(b2)
r1c2
r2c2

Важным моментом является объединение блоковстолбцов и строк при изменении размера на маленький.Блок в этом случае состоит из двух строк на один столбец.На это указывают (b1), (b2).

Этот тип логики должен быть расширен до нескольких строк и столбцов.

Возможно, я лаю не на том дереве.

В общем, я хотел бы выровнять текст по сетке под изображениями.В блоке первая строка всегда является изображением, вторая строка - всегда выровненным текстом.

Так как это преодолеть?

Answer 1

Если я правильно понял ваш вопрос, самое простое решение - добавить класс заказа для каждого столбца.Посмотрите приведенный ниже фрагмент кода на разных размерах, на компьютере и на мобильном устройстве, и вы увидите разницу в расположении и порядке.

РЕДАКТИРОВАТЬ: Я добавил поля на маленьком экране, как вы и просили.

/*DEMO PURPOSE*/.col-md-6{border:1px red solid;padding:2rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<section class="container-fluid">
  <div class="row">
    <div class="col-md-6 order-1 order-md-1">Row 1 Col 1</div>
    <div class="col-md-6 order-3 order-md-2">Row 1 Col 2</div>
    <div class="col-md-6 order-2 order-md-3 mb-3 mb-md-0">Row 2 Col 1</div>
    <div class="col-md-6 order-4 order-md-4">Row 2 Col 2</div>
  </div>
</section>