Working with bootstrap 4.1, I encountered an issue where I needed to hide certain elements only on mobile devices. The official documentation suggested using the d-sm-none d-md-block classes, but unfortunately, it did not work as expected.
To hide elements, you can use the .d-none class or any of the responsive .d-{sm,md,lg,xl}-none classes for different screen sizes. If you need to show an element only on specific screen size intervals, you can combine the .d--none class with a .d--* class. For example, using .d-none .d-md-block .d-xl-none will hide the element on all screen sizes except for medium and large devices.
Below is the code snippet in question, your assistance would be greatly appreciated:
HTML
<div class="row" id="second-row">
<div class="col-sm-12 col-lg-12">
<h2 class="text-uppercase" id="section-title">Lorem ipsum</h2>
</div>
<div class="col-sm-12 col-lg-6">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<div class="row" id="mini-gallery-row">
<div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
<img class="img-fluid w-100" src="img/placeholder.png" alt="" />
</div>
<div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
<img class="img-fluid w-100" src="img/placeholder.png" alt="" />
</div>
<div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
<img class="img-fluid w-100" src="img/placeholder.png" alt="" />
</div>
</div>
</div>