Bootstrap 4 - Responsive/Wrapping Button Group

Question

Preconditions

I want to use the Button group provided by bootstrap. Additionally the button group should be switched to a vertical button group for a certain screen size.

---

What I have right now

As I did not find a built-in functionality for this, I copied the button-group-vertical from the bootstrap sass and modified it to be usable for my use case:

@mixin button-group-vertical-button-style($btn-border-radius) {
  > .btn {
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }

    &:first-child:not(:last-child) {
      @include border-bottom-radius(0);
      @include border-top-radius($btn-border-radius);

      &:not(.dropdown-toggle) {
        @include border-bottom-radius(0);
        @include border-top-radius($btn-border-radius);
      }
    }

    &:last-child:not(:first-child) {
      @include border-top-radius(0);
      @include border-bottom-radius($btn-border-radius);
    }
  }

  > .btn-group:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
  }

  > .btn-group:first-child:not(:last-child) {
    > .btn:last-child,
    > .dropdown-toggle {
      @include border-bottom-radius(0);
      @include border-top-radius($btn-border-radius);
    }
  }

  > .btn-group:last-child:not(:first-child) > .btn:first-child {
    @include border-top-radius(0);
    @include border-bottom-radius($btn-border-radius);
  }
}

---

@mixin button-group-vertical-responsive($breakpoint-name) {
  .btn-group-vertical-#{$breakpoint-name} {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    .btn,
    .btn-group {
      width: 100%;
    }

    > .btn + .btn,
    > .btn + .btn-group,
    > .btn-group + .btn,
    > .btn-group + .btn-group {
      margin-top: -$input-btn-border-width;
      margin-left: 0;
    }

    @include button-group-vertical-button-style($btn-border-radius);

    &.btn-group-sm {
      @include button-group-vertical-button-style($btn-border-radius-sm);
    }
    &.btn-group-lg {
      @include button-group-vertical-button-style($btn-border-radius-lg);
    }
  }
}

---

@each $name, $width in $grid-breakpoints {
  @media (max-width: $width) {
    @include button-group-vertical-responsive($name);
  }
}

---

Now I can use it in my markup this way:

<div class="btn-group btn-group-vertical-md"></div>

---

Actual Question

This approach works fine, but somehow my gut feelings tells me that the approach is not very "clean" (the sass itself is also not very clean from my point of view, but I do not know on how to do better as I am not really a sass expert).

Does someone know about a better solution or has been in the same situation?

Thank you already!