如何用Bulma实现特定响应式列布局及排序行为

可以用Bulma的栅格系统结合自定义响应式规则实现需求，核心是利用Bulma的column类、响应式宽度类，配合媒体查询调整元素顺序，确保不同宽度下列数正确，且换行时原第二列成为新的第一列。

实现思路 #

1. 基础布局搭建：用Bulma的columns容器包裹列元素，添加is-multiline允许自动换行，自定义间距匹配原效果。
2. 响应式宽度控制：为列元素设置对应断点的宽度类，保证列数符合要求：
   • 屏幕≤1024px：每个列占满整行（is-12），即1列布局
   • 1025px≤屏幕≤1649px：每个列占半行（is-6），即2列布局
   • 屏幕≥1650px：每个列占1/3宽度（自定义类），即3列布局
3. 顺序调整：通过媒体查询修改元素的order属性，在2列布局时让原第二、第三列排在前面，原第一列移到下一行。

完整代码示例 #

HTML

<div class="block-container columns is-multiline">
  <div class="item column is-12 is-6-desktop">1</div>
  <div class="item column is-12 is-6-desktop">2</div>
  <div class="item column is-12 is-6-desktop">3</div>
</div>

CSS

/* 基础样式重置 */
body {
  margin: 0;
}

/* 容器样式 */
.block-container {
  padding-bottom: 30px;
  gap: 10px;
}

/* 列元素样式 */
.item {
  background: green;
  padding: 20px;
  border: 1px solid red;
  color: #fff;
  font-family: arial;
  text-align: center;
}

/* 自定义大屏（≥1650px）列宽度 */
@media (min-width: 1650px) {
  .block-container .column {
    flex: 0 0 calc(33.33333% - 10px);
    width: calc(33.33333% - 10px);
  }
}

/* 中屏（1025px-1649px）调整元素顺序 */
@media (min-width: 1025px) and (max-width: 1649px) {
  .block-container .item:nth-child(1) {
    order: 3;
  }
  .block-container .item:nth-child(2) {
    order: 1;
  }
  .block-container .item:nth-child(3) {
    order: 2;
  }
}

效果验证 #

• 屏幕≥1650px：3列布局，元素顺序为[1][2][3]，宽度一致
• 1025px≤屏幕≤1649px：2列布局，元素顺序为[2][3]在上一行，[1]在下一行，满足“原第二列成为新第一列”的要求
• 屏幕≤1024px：1列布局，元素按原顺序垂直排列[1][2][3]

内容的提问来源于stack exchange，提问作者Luca Murzio