基于Flexbox/Grid实现Vuetify中不同视图的特定元素排序

利用Vuetify原生的响应式网格系统和order类就能简洁实现需求，完全贴合移动端优先原则，无需额外自定义CSS：

核心思路 #

• 移动端默认保持元素1-6垂直顺序排列，每个元素占满整行。
• 中等视口（md及以上）通过调整元素的md-order和md宽度属性，实现左侧垂直排列2-5、右侧顶部并排1和6的布局。

完整代码示例 #

<template>
  <v-container fluid>
    <!-- align="start" 确保所有元素顶部对齐 -->
    <v-row align="start" gutter="4">
      <!-- 元素1：移动端第1位，中等视口右侧顶部 -->
      <v-col cols="12" md="4" order="0" md-order="4">
        <v-card class="pa-4">元素1</v-card>
      </v-col>
      <!-- 元素2：移动端第2位，中等视口左侧第1位 -->
      <v-col cols="12" md="4" order="1" md-order="0">
        <v-card class="pa-4">元素2</v-card>
      </v-col>
      <!-- 元素3：移动端第3位，中等视口左侧第2位 -->
      <v-col cols="12" md="4" order="2" md-order="1">
        <v-card class="pa-4">元素3</v-card>
      </v-col>
      <!-- 元素4：移动端第4位，中等视口左侧第3位 -->
      <v-col cols="12" md="4" order="3" md-order="2">
        <v-card class="pa-4">元素4</v-card>
      </v-col>
      <!-- 元素5：移动端第5位，中等视口左侧第4位 -->
      <v-col cols="12" md="4" order="4" md-order="3">
        <v-card class="pa-4">元素5</v-card>
      </v-col>
      <!-- 元素6：移动端第6位，中等视口右侧顶部（与元素1并排） -->
      <v-col cols="12" md="4" order="5" md-order="5">
        <v-card class="pa-4">元素6</v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

代码说明 #

1. 移动端布局：每个v-col的cols="12"让元素占满整行，order属性按0-5依次设置，保证元素1-6垂直排列。
2. 中等视口布局：
   • 元素2-5的md="4"设置宽度为4列（总12列），md-order设为0-3，确保它们在左侧垂直排列。
   • 元素1和6的md="4"各占4列，md-order设为4和5，让它们在右侧并排显示，结合v-row的align="start"保证顶部对齐。
3. gutter属性：用于控制元素间的间距，可根据需求调整数值。

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