Apply bottom margins in Bootstrap 4 ONLY in xs (smartphone and iphone)

Since the classes apply their styles in increasing screen size and CSS is cascading you can use the second class to override the first one. In your example that could be:

<div class="mb-4 mb-sm-0"></div>

which overrides the first class, when the second one activates.

.mb-4 {
  margin-bottom: 1.5rem !important;
}

@media (min-width: 576px) {
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
}

<div class="mb-4 mb-sm-0"></div>