Change media-breakpoint-down implementation

Created by: MartijnCuppens

media-breakpoint-down() always used the next breakpoint, so if you want to target viewports smaller than lg (992px) you needed to use:

.selector {
  // Below lg breakpoint:
  @include media-breakpoint-down(md) {
    display: none;
  }
}

I've made another codepen to illustrate the problem: https://codepen.io/MartijnCuppens/pen/pMNjaN?editors=1100

In this PR, I've changed the implementation to use the breakpoint itself. I've also dropped the media-breakpoint-only() mixin since we do not use the "breakpoint zone" approach like we did in v3.

The new implementation looks like this: https://codepen.io/MartijnCuppens/pen/MNBqjY?editors=1100

To simplify reviews: this is the difference in generated css, some blocks are just shifted: https://www.diffchecker.com/2ZUTxc1P (updated June 14th)