How can I align Bulma's level items horizontally on smaller screens?

Question

The footer of my website contains a level layout with a left and right part according to the Bulma docs. On larger screens this is fine.

On smaller screens however all items of the right part get stacked vertically. Whereas I'd like them to be aligned horizontally and centered as in the following image.

Please see this example:
https://codepen.io/anon/pen/aVdPPy

Answer 1

You have 2 options here.

Option 1

Add the .is-mobile modifier to .level and then add some additional CSS to stack .level-left and .level-right.

.level.is-mobile {
  flex-direction: column;
}

Option 2

Alternatively, add the .is-flex-mobile modifier to level-right, and add additional CSS to override the justify-content property:

.level-right.is-flex-mobile {
  justify-content: center;
}