Bootstrap4 row and col not stacking up each other when the screen size is small

Question

I'm attempting to do like a portfolio of images. For example, in Desktop screen, it has 3 images a row. In mobile screen, I attempt to do 2 images a row. The issue I face is:

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 |

The rough code layout I have is

<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>

I have done quite a few web-app in Desktop screen but it is the first time I'm attempting to do responsive!

Answer 1

the problem is you have inserted "col-sm-6 col-lg-4" in 2 different "row"

The solution is, put all the "col-sm-6 col-lg-4" in single "row"

<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>

Answer 2

Remember that Bootstrap is a mobile-first library, meaning that all clases will be applied from mobile to large screens. If you want your clases to be applied to a mobile screen you don't have to add a screen size in your class, just add 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>