Breakpoints not working correctly for xs in vuetify

Question

I'm having some unexpected behavior with breakpoints in Vuetify. I want my columns to be side by side from medium to xl, and for sm and below I want each column to take up the entire row (one on top of the other). What I see is, going from XL to M, the columns are displayed side-by-side, as expected. Once the viewport shrinks to small, they are displayed on top of each other, as expected. But once it gets to xs, they go back to side-by-side, which I don't understand. Here is an abbreviated version of the code. Please let me know if I have anything wrong. I've looked at several posts and what I have seems pretty consistent with proposed solutions.

<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="6" sm="12">
          <v-card height="100%">
            <v-card-title>Classes</v-card-title>
            <v-card-text>
              <!-- text redacted for brevity -->
            </v-card-text>
          </v-card>
        </v-col>

        <v-col cols="6" sm="12">
          <v-card height="100%">
            <v-card-title>Requirements</v-card-title>
            <v-card-text>
              <!-- text redacted for brevity -->
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

I've also tried more explicit definitions, to no avail, like the following:

<v-col med="6" sm="12">
<v-col cols="6" med="6" sm="12">

etc...

Answer 1

If I understand correctly, you want 12 spans on xs and sm and 6 from md and up. So, in this case, you need to do:

<v-col cols="12" md="6">
<v-col cols="12" md="6">

PS: "cols" is the xs selector. What you were doing was 6 on xs and 12 on sm.