使用 Vuetify 重新排序 vue 中的列

Question

我正在使用 Vuetify，并试图让我的网站具有响应性，这样当它在 xs（手机屏幕尺寸）时，cols 应该从 cols="4" 变为 cols="2"。这是可行的，但我还想通过在 v-col 元素上使用 order-xs="first" 来重新排序我的 cols，以使其位于其他 v-cols 的顶部。

如果我在各自的尺寸上使用 order-sm="first" 或 order-md="first"，它会起作用，但在 xs 上却不行。

xs 是否存在错误，或者它应该不起作用？

<v-row align="center">
          <v-col cols="4" sm="2">
            <v-text-field
              dense
              hide-details
              label="Start"
              color="#01AB55"
              outlined
            ></v-text-field>
          </v-col>
          <v-col cols="4" sm="2">
            <v-text-field
              dense
              hide-details
              label="Slutt"
              color="#01AB55"
              outlined
            ></v-text-field>
          </v-col>
          <v-col cols="4" sm="2">
            <v-text-field
              dense
              hide-details
              label="Dato"
              color="#01AB55"
              outlined
            ></v-text-field>
          </v-col>

          <v-spacer></v-spacer>

          <v-col cols="4" sm="2" order-xs="first"> //not working
            <v-text-field
              dense
              hide-details
              label="Søk"
              color="#01AB55"
              outlined
            ></v-text-field>
          </v-col>
          <v-col cols="4" sm="2" order-xs="first">  //not working
            <v-btn color="#01AB55"><span>Søk</span></v-btn>
          </v-col>
        </v-row>

Answer 1

对于xs，正确的属性名称是order。