Cards row on large screen that turns into a carousal on small screens in Html CSS

I'm trying to turn a row of cards (on large screens i.e.4k) into a carousal (on small screen i.e. iPhone XR/ 600px), I've tried different solutions and nothing worked. Here is slick carousal that I'm trying to work with:

 </div>
    <div class="responsive container d-md-none d-lg-none">
        <div
            style="height: 200px; width: 10px !important;  display: flex; justify-content: center; align-items:center ;">
            <div class="square">
                <div> <img src="./assests/Icon/Home/blog 1-1.png" alt="" style="transform: rotate(0deg) !important;">
                </div>

            </div>
        </div>
        <div
            style="height: 200px; width: 10px !important;  display: flex; justify-content: center; align-items:center ;">
            <div class="square">
                <div> <img src="./assests/Icon/Home/blog 1 - 2.png" alt="" style="transform: rotate(0deg) !important;">
                </div>

            </div>
        </div>
        <div
            style="height: 200px; width: 10px !important;  display: flex; justify-content: center; align-items:center ;">
            <div class="square">
                <div> <img src="./assests/Icon/Home/blog 1 - 3.png" alt="" style="transform: rotate(0deg) !important;">
                </div>

            </div>
        </div>
        <div
            style="height: 200px; width: 10px !important;  display: flex; justify-content: center; align-items:center ;">
            <div class="square">
                <div> <img src="./assests/Icon/Home/blog 1 - 4.png" alt="" style="transform: rotate(0deg) !important;">
                </div>

            </div>
        </div>
        <div
            style="height: 200px; width: 10px !important;  display: flex; justify-content: center; align-items:center ;">
            <div class="square">
                <div> <img src="./assests/Icon/Home/blog 1-1.png" alt="" style="transform: rotate(0deg) !important;">
                </div>

            </div>
        </div>
        <div
            style="height: 200px; width: 10px !important;  display: flex; justify-content: center; align-items:center ;">
            <div class="square">
                <div> <img src="./assests/Icon/Home/blog 1 - 2.png" alt="" style="transform: rotate(0deg) !important;">
                </div>

            </div>
        </div>
        <div
            style="height: 200px; width: 10px !important;  display: flex; justify-content: center; align-items:center ;">
            <div class="square">
                <div> <img src="./assests/Icon/Home/blog 1 - 3.png" alt="" style="transform: rotate(0deg) !important;">
                </div>

            </div>
        </div>
        <div
            style="height: 200px; width: 10px !important;  display: flex; justify-content: center; align-items:center ;">
            <div class="square">
                <div> <img src="./assests/Icon/Home/blog 1 - 4.png" alt="" style="transform: rotate(0deg) !important;">
                </div>

            </div>
        </div>

    </div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="./assests/slick-1.8.1/slick/slick.min.js"></script>


<script>$('.responsive').slick({
        centerMode: true,
        centerPadding: '60px',
        dots: true,
        /* Just changed this to get the bottom dots navigation */
        infinite: true,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: true
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
    });</script>

I have used two containers, one for cards row and assigned it bootstrap class d-sm-none so that it can't be displayed on small screen . Second container for the carousal that would show itself on small screens I've assigned this container d-md-none d-lg-none so that it can't be displayed on large screens . This solution didn't work.

Any help would be appreciated .