Bulma CSS移动端列顺序反转问题：如何调整小屏幕下列堆叠顺序？

嘿，这个需求我之前做项目时刚好遇到过！Bulma本身就提供了非常顺手的内置工具类，完全不用写额外的自定义CSS就能搞定，这也是框架设计的初衷——用类名快速实现布局需求。

最佳实现方案：利用Bulma响应式Order工具类 #

Bulma的flex布局体系支持针对不同断点设置元素的排列顺序，刚好匹配你要的「大屏保持原顺序，小屏（768px及以下）反转堆叠」的需求。

只需要给两个列分别添加移动端的order类即可：

<div class="columns">
  <div class="column is-5 is-order-2-mobile">原左侧内容</div>
  <div class="column is-7 is-order-1-mobile">原右侧内容</div>
</div>

原理说明：

• is-order-*-mobile是Bulma专门为移动端（屏幕宽度<768px）设计的顺序控制类，数值越小的元素会越靠前显示。
• 大屏状态下，这些mobile前缀的类不会生效，列依然按照HTML里的原顺序（is-5左、is-7右）排列。
• 当屏幕缩小到768px以下时，is-order-1-mobile的列会排在最上方，is-order-2-mobile的列紧随其后，完美实现反转堆叠的效果。

备选方案：自定义CSS（不推荐） #

如果你因为特殊场景需要自定义样式，也可以通过媒体查询实现，但不如内置类简洁易维护：

/* 针对768px及以下屏幕 */
@media (max-width: 767px) {
  .columns {
    flex-direction: column-reverse;
  }
}

但还是优先推荐用内置工具类，这样代码更符合Bulma的设计规范，后续维护也更省心~

内容的提问来源于stack exchange，提问作者Filip Egeric