I am looking to rearrange a row of columns when the screen size is reduced. Initially, I have column one followed by column two in order. However, on smaller screens, I want column two to move up and become the first column.
<v-row>
<v-col cols='12' sm='12' md='12' lg='6'>Description</v-col>
<v-col cols='12' sm='12' md='12' lg='6'><v-img :src="..."/></v-col>
</v-row>
As the screen gets smaller or the browser window is scaled down, I want the second column to be displayed above the first column in the stacked layout.
Full Width
______________________
| | |
| Col1 | Col2 |
|__________|_________|
Screen Break
____________
| |
| Col2 |
|__________|
| |
| Col1 |
|__________|
Currently, column one is positioned at the top initially.