Making flex box responsive

Expected behavior I have multiple sector cards thanks to django for loop template, I would like to see four cards per row on lg devices with a width of 25% per card and 1 card with a width of 100% on sm devices.

Actual behavior On small devices I'm getting one card per row but the width is still 25% making the card too narrow to view and when I shrink my browser to the smallest width in getting 4 cards per row and not 1. I did not see a class for extra small devices.

Question How can I get the width to be 100% on small and extra small devices and 25% on large and extra large devices?

Resources (screenshots, code snippets etc.)

 <div class="d-flex flex-wrap flex-lg-row flex-sm-column features-big my-4 text-
    center">

                    {% for sector in sectors  %}
                    <div class="w-25 mb-4 p-3 wow fadeIn sector" data-wow-delay="0.4s">
                        <div class="card hoverable">
                            <i class="fas fa-satellite blue-text mt-3 fa-3x my-4"></i>
                            <h5 class="font-weight-bold mb-4">{{ sector }}</h5>
                            <p class=" grey-text font-small mx-3">
                                Our livestock experts visit farmers accross the region
                                providing training on best practices for livestock production.
                            </p fa-3x mb-4>
                        </div>
                    </div>

                    {% endfor %}

                </div>