如何在较小的屏幕上水平对齐 Bulma 的关卡项目？

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

我网站的页脚包含一个 level 布局，其左右部分根据 Bulma docs。在更大的屏幕上这没问题。

然而，在较小的屏幕上，右侧部分的所有项目都会垂直堆叠。而我希望它们水平对齐并居中，如下图所示。

请看这个例子：
https://codepen.io/anon/pen/aVdPPy

这里有 2 个选项。

选项 1

将 .is-mobile 修饰符添加到 .level，然后添加一些额外的 CSS 以堆叠 .level-left 和 .level-right。

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

选项 2

或者，将 .is-flex-mobile 修饰符添加到 level-right，并添加额外的 CSS 以覆盖 justify-content 属性:

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