How to change the number of columns in Bootstrap grid with Laravel and JQuery Masonry - laravel

Question

I know little about Laravel and Masonry grid layout, but I know how Bootstrap framework works.
I need to change the number of columns in a Boostrap grid for small size devices like a mobile phone. Currently, the number of columns is 3 because the class used is col-xs-4. However, I need to change it to col-xs-6, so that it shows 2 columns.
I don't think it's that hard, but I don't know how Laravel works.
I tried searching for those divs in the whole project so that I could directly change those classes, but I couldn't find anything.
This is an example of one column in a row:
<div class="container-fluid">
<div class="row">
<div class="fw-divider-space hidden-below-xl pt-70"></div>
<div class="col-lg-12">
<div data-animation="fadeInDown" class="row isotope-wrapper masonry-layout c-gutter-5 c-mb-5 animate animated fadeInDown" style="position: relative; height: 798px;">
<div class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 col-xs-4 col-4" style="position: absolute; left: 0%; top: 0px;">
<div class="vertical-item item-gallery content-absolute text-center ds">
<a href="https://www.tusencuentros.cl/modelo/9/ver" class="item-media h-100 w-100 d-block"><img src="https://www.tusencuentros.cl/storage/fotos_perfil/9-1.jpg" alt="Modelo">
<div class="media-links"></div>
</a>
<img src="https://clubvip.cl/storage/watsapp_logo.png" style="width: 40px; height: 40px; margin-top: 5px;"> <i aria-hidden="true" class="fa fa-phone-square" style="font-size: 36px; color: rgb(255, 255, 255); float: right;"></i>
<div class="item-content" style="background-color: rgb(233, 11, 165);">
<div class="item-title" style="top: -80px; width: 100%;">
<div style="display: inline-flex;">
<p style="font-size: 14px;">CARLITA </p>
</div>
<div>
<p style="font-size: 12px;">CHILENA, 20</p>
</div>
<div>
<p style="font-size: 10px;">Medidas: 94-62-98</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I expect the classes col-xs-4 to be col-xs-6.

Answer 1

I assume you use laravel blade
You can use dynamic css class in here like
class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 {{ $isMobile ? 'col-xs-6' : 'col-xs-4' }} col-4"
In the curly blackets : is this mobile device? if yes, I will use col-xs-6 if not I will use col-xs-4
But you need to send the checking of $isMobile from your controller and there is a very simple component for that here jenssegers/agent
After installation you can perform check for mobile device by using $agent->isMobile() method

Answer 2

Finally I could fix it by finding out that the folder with the file that contains those divs was inside a non-public location called "resources". Since I know little about Laravel Blade, I didn't know the directory structure.