To achieve the desired layout, you can combine flex-direction: row-reverse; and flex-wrap: wrap-reverse;.
Custom Styling
To avoid conflicting with the default Bootstrap styles, I have created a custom class named .btn-group-custom.
<div class="btn-group btn-group-custom">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-primary">Button 2</button>
<button type="button" class="btn btn-primary">Button 3</button>
<button type="button" class="btn btn-primary">Button 4</button>
<button type="button" class="btn btn-primary">Button 5</button>
<button type="button" class="btn btn-primary">Button 6</button>
<button type="button" class="btn btn-primary">Button 7</button>
<button type="button" class="btn btn-primary">Button 8</button>
<button type="button" class="btn btn-primary">Button 9</button>
<button type="button" class="btn btn-primary">Button 10</button>
<button type="button" class="btn btn-primary">Button 11</button>
</div>
CSS Styles
.btn-group-custom {
/* Reverse the order of wrapped items, positioning "alone" button at the top */
flex-wrap: wrap-reverse;
/* Display the row in reverse order to place the "alone" button on the right */
flex-direction: row-reverse;
}
.btn-group-custom > .btn {
/* Set width for 5 buttons in a row */
width: 20%;
}
.btn-group-custom > .btn:first-child,
.btn-group-custom > .btn:last-child {
border-radius: 0 !important;
}
/* Optional: add rounded corners to first and last child buttons */
.btn-group-custom > .btn:first-child {
border-bottom-right-radius: .25rem !important;
}
.btn-group-custom > .btn:last-child {
border-top-left-radius: .25rem !important;
}
Preview
https://i.sstatic.net/v9zYJ.png
View Demo: https://jsfiddle.net/davidliang2008/a3s7zno1/33/