Product carousel, show one item on mobile

Question

I want to use a bootstrap snippet but I need it to be a little different.

I want it to show one item on small screens but it shows several items like this:

How can I change the code to satisfy my will? ( I want 4 items per row in desktop mode and 1 item per row in mobile mode)

Thanks

Snippet Preview

Snippet HTML File

Answer 1

Use this CSS

.carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        display: inline-flex;
        height: 320px;
    }