Bootstrap display property gap fix - html

Question

I have this div row that I would like to have adjusted when the window size changes.
<div class="row">
<div class="col-md-12 d-block d-sm-none d-xs-none text-center">
Login
<span class="or-spacer my-auto">or</span>
Register
<br>
<p>to claim this coupon</p>
</div>
<div class="col-md-12 text-left d-none d-md-block d-lg-block d-xl-block">
Login
<span class="or-spacer my-auto">or</span>
Register
<span class="or-spacer my-auto">to claim this coupon</span>
</div>
</div>
I followed the classes in this bootstrap page: https://getbootstrap.com/docs/4.0/utilities/display/
the top div displays on size sm and below and the bottom one shows on size md and above.
The problem is there is a small gap in between md and sm that displays neither of the two. The Login and Register buttons disappear.
md+
between md and sm (no display)
sm-
What can be changed for the no display in between md and sm?

Answer 1

There is no gap between sm and md
sm ranges till 767px while md starts from 768px
Try this :
<div class="row">
<div class="d-none d-md-block">
visible for md and above
</div>
<div class="d-block d-md-none">
visible for sm and below
</div>
</div>

Answer 2

You just needed to change d-sm-none to d-md-none in your sm block:
<div class="row">
<div class="col-md-12 d-block d-md-none d-xs-none text-center">
Login
<span class="or-spacer my-auto">or</span>
Register
<br>
<p>to claim this coupon</p>
</div>
<div class="col-md-12 text-left d-none d-md-block d-lg-block d-xl-block">
Login
<span class="or-spacer my-auto">or</span>
Register
<span class="or-spacer my-auto">to claim this coupon</span>
</div>
</div>