When all buttons are displayed as "display: inline-block", there can be an anomaly by giving it a "display: block" style. This wil however prevent the button after that one to align next to it. The reason that your solution seems to work is that the block level button is hidden by the inline styling.
The inline styling you apply, the first rule "display: none" is overruled by the second rule and therefore useless at this point. Also, the button doesn't need to have any text.
For this moment I guess that this is a good solution, because there isn't really much room for an alternative.
How about floating your buttons? Add a float:left
to buttons inside a .mx-grid-controlbar
, then clear:left
to the one you want to move to a new line.