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...
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.