Fix incorrect responsive alignment of dropdown menu

[ysds]

It is incorrect to define left and right within separate @media.

The following demo shows incorrect alignment. The dropdown menu should be right aligned when large screen.

demo: https://codepen.io/anon/pen/WLGjGz

To fix the priority problem, it must be defined at the same breakpoint like a text utility.

bootstrap/scss/utilities/_text.scss

Lines 18 to 26 in 12c4d3c

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

[MartijnCuppens]

This not only fixes the problem, but also combines multiple classes in a media query which saves some css. Thanks a lot, @ysds!