Reordering columns in vue with Vuetify

Question

I am using Vuetify, and trying to make my website responsive, so that when it is in xs (mobile phone screen size), the cols should go from cols="4" to cols="2". This is working, but I also want to reorder my cols by using order-xs="first" on a v-col element, to get it at the top of the other v-cols.

It is working if I use order-sm="first" or order-md="first" on the respective sizes, but not on xs.

Is there a bug with xs, or should it not be working?

<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

For xs the proper attribute name is order.