Here is my HTML code with Bootstrap CSS included in the head section:
According to Bootstrap, each col div should take up 12 columns on small screens, which essentially fills the entire screen. Additionally, it should hide the img with the .d-sm-none .d-md-block classes, but when I resize in Chrome tools, it's not working as expected. I tried searching Google for a solution, but so far no luck. I even attempted removing the flex class, but that didn't change anything.
<body cz-shortcut-listen="true">
<div class="container-fluid">
<div class="row d-flex flex-wrap">
<div class="col-sm-12 col-md-6 col-lg-3 ">
<div class="card" style="width: 18rem;">
<img class="card-img-top d-sm-none d-md-block" src="img/1.jpg" alt="Tower">
<div class="card-body">
<h5 class="card-title">Tower</h5>
<p class="card-text">City: dubay Zip-Code 4993
<br>
</p><p>Created: 1.2.2015, 05:40:00
</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3 ">
<div class="card" style="width: 18rem;">
<img class="card-img-top d-sm-none d-md-block" src="img/1.jpg" alt="Palme">
<div class="card-body">
<h5 class="card-title">Palme</h5>
<p class="card-text">City: Dubai Zip-Code 333
<br>
</p><p>Created: 1.2.2011, 05:40:00
</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img/2.jpg" alt="Mcdonald">
<div class="card-body">
<h5 class="card-title">Mcdonald fastfood</h5>
<p class="card-text">City: melbourn Zip-Code 4544
<br>
</p><p>
<label>Phone, Web</label>
<br>
+66 4895643312
<br>
www.getfat.com
</p><p>Created: 2.3.2020, 04:30:00
</p>
</div></div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img/2.jpg" alt="Burgerkin">
<div class="card-body">
<h5 class="card-title">Burgerkin fastfood</h5>
<p class="card-text">City: Switzerlan Zip-Code 4334
<br>
</p><p>
<label>Phone, Web</label>
<br>
+66 443543512
<br>
www.getfatter.com
</p><p>Created: 2.3.2011, 04:30:00
</p>
</div></div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img/3.jpg" alt="Eating Burger">
<div class="card-body">
<h5 class="card-title">Eating Burger</h5>
<p class="card-text">City: burgertown Zip-Code 4234
<br>
<label> Event Infos </label>
</p><ul>
<li>14. June. 2100</li>
<li>3 o clock</li>
<li>56</li>
<li>www.event.com</li>
</ul>
<p>Created: 1.2.2019, 03:25:00
</p>
</div></div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img/3.jpg" alt="Sky diving">
<div class="card-body">
<h5 class="card-title">Sky diving</h5>
<p class="card-text">City: skytown Zip-Code 4666
<br>
<label> Event Infos </label>
</p><ul>
<li>14. June. 2000</li>
<li>5 o clock</li>
<li>560</li>
<li>www.eve222nt.com</li>
</ul>
<p>Created: 1.2.2011, 03:25:00
</p>
</div></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>