Responsive text utilities are missing the !important rule (v4)

Created by: asnoba

When doing something like <p class="text-left text-md-right">I'm always aligned to the left</p> the text-left helper class takes precedence, because the responsive utility classes are missing the !important rule (or should be removed from the base classes):

.text-left           { text-align: left !important; }
.text-right          { text-align: right !important; }
.text-center         { text-align: center !important; }
.text-justify        { text-align: justify !important; }
.text-nowrap         { white-space: nowrap !important; }
.text-truncate       { @include text-truncate; }

// Responsive alignment

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    .text-#{$breakpoint}-left   { text-align: left; }
    .text-#{$breakpoint}-right  { text-align: right; }
    .text-#{$breakpoint}-center { text-align: center; }
  }
}