Bootstrap4 строка и столбец не складываются друг с другом, когда размер экрана небольшой

Question

Я пытаюсь сделать как портфолио изображений. Например, на рабочем столе экран имеет 3 изображения подряд. На мобильном экране я пытаюсь сделать 2 изображения подряд. Проблема, с которой я сталкиваюсь:

In Desktop:

| Image A | Image B | Image C |
| Image D | Image E | Image F |

In Mobile (What I tried):

| Image A | Image B |
| Image C |
| Image D | Image E |
| Image E |

In Mobile (What I want):

| Image A | Image B |
| Image C | Image D |
| Image E | Image F |

Грубый макет кода, который у меня есть,

<div className="row">
    <div className="col-sm-6 col-lg-4">
        Insert Image A
    </div>
    <div className="col-sm-6 col-lg-4">
        Insert Image B
    </div>
    <div className="col-sm-6 col-lg-4">
        Insert Image C
    </div>
</div>
<div className="row">
    <div className="col-sm-6 col-lg-4">
        Insert Image D
    </div>
    <div className="col-sm-6 col-lg-4">
        Insert Image E
    </div>
    <div className="col-sm-6 col-lg-4">
        Insert Image F
    </div>
</div>

Я сделал довольно много веб-приложений на экране рабочего стола, но я впервые Пытаюсь сделать отзывчивым!

Answer 1

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

<div className="row">
<div className="col-6 col-lg-4">
    Insert Image A
</div>
<div className="col-6 col-lg-4">
    Insert Image B
</div>
<div className="col-6 col-lg-4">
    Insert Image C
</div>
</div>
<div className="row">
<div className="col-6 col-lg-4">
    Insert Image D
</div>
<div className="col-6 col-lg-4">
    Insert Image E
</div>
<div className="col-6 col-lg-4">
    Insert Image F
</div>

Answer 2

проблема в том, что вы вставили "col-sm-6 col-lg-4" в 2 разных "ряда"

Решение состоит в том, чтобы поставить все "col-sm-6 col-lg- 4 "в один" ряд "

<div className="row">
 <div className="col-sm-6 col-lg-4">
    Insert Image A
 </div>
 <div className="col-sm-6 col-lg-4">
    Insert Image B
 </div>
 <div className="col-sm-6 col-lg-4">
    Insert Image C
 </div>
 <div className="col-sm-6 col-lg-4">
    Insert Image D
 </div>
 <div className="col-sm-6 col-lg-4">
    Insert Image E
 </div>
 <div className="col-sm-6 col-lg-4">
    Insert Image F
 </div>
</div>