don't get the right size on small screen - css

Question

I'm using bootstrap4 and Stream UI Kit for the user interface in my application but i don't get the right size of column on the small screen !!
example !
it's supposed to be one per line when we browse on mobile !! with col-md-4 you can check the demo
<!-- Campaigns Grid -->
<section class="pt-11 pb-6 bg-light">
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-5">
<h2 class="h3 text-center">{{ trans('user.offers') }}</h2>
{{ trans('user.all') }}
</div>
<div class="row">
#foreach($offers as $demand)
<div class="col-md-4 mb-5">
<div class="card h-100 border-0 shadow">
<a href="{{ url('/campaign/'.$demand->id) }}" class="d-block bg-gradient rounded-top">
<img class="card-img-top hover-fade-out" src="{{ url('upload/campaign/'. $demand->cover .'/') }}" alt="{{ $demand->title }}" height="244">
</a>
<div class="card-body">
<a href="{{ url('/campaign/'.$demand->id) }}">
<h3>{{ $demand->title }}</h3>
</a>
<p>
{!! str_limit(strip_tags($demand->content), 128) !!}
</p>
</div>
<div class="card-footer d-flex">
#foreach($demand->categories as $category)
#if(App::isLocale('ar')) <a href="{{ url('/category/'.$category->id) }} " class="badge badge-pill badge-secondary mr-1" >{{ $category->title_ar }} </a>
#elseif(App::isLocale('fr')) {{ $category->title }}
#else {{ $category->title_en }}
#endif
#endforeach
</div>
</div>
</div>
#endforeach
</div>
</div>
</section>
<!-- End Campaigns Grid -->

Answer 1

You can use, col-md-4 along with all classes for devices.
Use this in one in line
class=“col-6 col-md-4 col-sm-4 col-lg-4 col-xl-4”
These classes themselves give responsive on all devices.
col - set mobile
col-md - set medium devices
col-sm - small
col-lg - large
col-xl - extra large
They will manage automatically.