how to make my blog cards (posts) responsive to adapt to smaller screen (tphones) in Django templates?

here is my html code using boostrap4 to make cards in my home page :

  <div class="container"><div class="card-columns" >
{% for i in post %}
<div class="card text-center" style="width: 16rem;">
    {% if i.image_url %}
    <img class="card-img-top" alt="Card image" style="width:100%" src="{{ i.image_url }}">
    {% else %}
    <img class="card-img-top" alt="Card image" style="width:100%" src="{{ i.image.url }}">
  {% endif %}
  <div class="card-body">
      <h5 class="card-title"> {{i.title  | slice:":40"}} </h5>
        <p class="card-text"> {{i.description | slice:":50" }}</p>
    <ul class="list-unstyled">
      <li class="align-items-center" style="text-align:center;"><h4 class="text-success font-weight-bold align-items-center">{{i.deal_price}}</h4> <del>{{i.orig_price}}</del> </li>
      <li class="text-danger font-weight-bold " style="text-align:center;">{{i.ending_day}} {{i.ending_time}}</li>
      {% if not i.is_expired %}
      <li class="text-danger font-weight-bold "style="text-align:center;">Expired</li>
      {% endif %}
    </ul>
        <a href="{% url 'post_detail' i.slug %}" class="btn btn-primary stretched-link" style="text-align:center;">Read More</a>
    </div>
    </div>
  {% endfor %}

and here is how my website looks like in pc screen:

but in smaller screen this is how it looks :

in phone screen :

I want a way to make those blog cards responsive to adapt any screen size and looks decent in the center. Thank you!