I'm using the classes as defined
Applies margin to an element using responsive breakpoints {property}{sides}-{breakpoint}-{size} m(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, 3, 4, 5)
Meaning that
<div class="col-12 mb-sm-3"></div>
Should produce a div with margin bottom on small devices, but it doesn't.
I got what is happening. The mb-sm-3 only affects min-width of 576px so in mobile, iphone 6 for instance, min-width is less than 576 so what I needed to do was:
<div class="col-12 mb-3 mb-sm-0"></div>
This creates a margin bottom of 3 for below sm (xs in the case) and then sm and above get zero.
Thanks for your help.