responsive layout with vuetify

4
votes

i have a layout which each row has 4 divs, now in mobile i want to change 4 divs to 2 divs like image

enter image description here

here is my code 

<v-layout wrap align-center>
    <v-flex
        v-for="n in 10  "
           :key="n"
           xs3
           >
           <p>testtttt</p>
     </v-flex>
</v-layout>

Example from Vuetify https://codepen.io/thanhtungvo/pen/Padagq?&editors=100 current there are 3 images, how to change 2 images and keep the max-width in mobile version(responsive) Thanks

2
vue.jsvuetify.js

2 Answers

9
votes

thanks for Vuetify, it can be fixed like that 

<v-flex
  v-for="i in 4 "
    :key="i"
     xs6
     md3
>

xs6: for small screen
md3: for medium screen
other metrics can check on the document https://vuetifyjs.com/en/layout/display

1
votes
<v-flex v-for="i in 6" :key="i" xs6>