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.