According to the bootstrap documentation, to use the visibility utility provided from the framework it's necessary to use the d-none to not display an element or the d-* with the relative breakpoint to set an element to be visible only on mobile tablet or desktop.
I'm facing an issue with this concept, but maybe I'm using the wrong way to do this.
I have these example of image that I want to be displayed only on mobile or desktop
<img class="img-fluid w-100 d-sm-none d-md-none d-lg-block desktop-cover" src="...">
<img class="img-fluid w-100 d-lg-none d-md-block d-sm-block mobile-cover" src="...">
The first will appear also on mobile and tablet and I don't want this, I think that the classes are set correctly? To solve this I've added the .d-none class but not work as expected.
The second works fine and is displayed only on mobile and tablet.
Can someone tell me how to correctly use the display utility of bootstrap and what's wrong with the implementation I've done?