How to have the following <v-col> all one below each other on mobile devices only ?
<v-container>
<v-row>
<v-col>A</v-col>
<v-col>B</v-col>
</v-row>
<v-row>
<v-col>C</v-col>
<v-col>D</v-col>
</v-row>
<v-container>
How to set all <v-col> one below each other on mobile devices only?
Viewed 717
1 Answers
Just set value of the prop cols to span over the 12 columns.
<v-container>
<v-row>
<v-col cols="12" sm="6">A</v-col>
<v-col cols="12" sm="6">B</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6">C</v-col>
<v-col cols="12" sm="6">D</v-col>
</v-row>
<v-container>
The above code will display the columns on each other on mobile only.
From the sm breakpoint and up, each column will span over half of the viewport.
Demo on Codepen.
This is what it shows once on mobile viewport:
And if the viewport is wider than the mobile one, we get this:
Related