Vuetify grid - reverse order of columns on screen-size break-CodePudding

I have a row of 2 columns that I want to display in their current order. However, when the screen sized is reduced I want to change the order of the columns so column two becomes 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>

When viewed on a smaller screen or the browser is scaled down, the columns will stack and I want the second column to move to the top.

Full Width
______________________
|          |         |
|   Col1   |   Col2  |
|__________|_________|

Screen Break
____________
|          | 
|   Col2   | 
|__________|
|          | 
|   Col1   | 
|__________|

Currently col1 is on top.

CodePudding user response：

you can use vuetify's responsive flex order classes to achieve this effect.

for example you can put on Col1 in your example, this will cause the first v-col to render in the last flex position up until md breakpoint from which it will render in the first flex position.

run the example below and hit 'Full Page' to see the effect in action.

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
});

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row >
        <v-col cols="12" md="6" >Title one</v-col>
        <v-col cols="12" md="6">Title two</v-col>
      </v-row>
    </v-container>
  </v-app>
</div>