Cards display inline when is desktop and one above another when is mobile



  • Hi I need to change card direction depend on screen size. What is the best method to do it? Card have to have specific width, margins, paddings and grid

    <div :class="panelDitection">
       <div class="col" v-for=...>
         <Card class="cardClass" />
    
    ......
    
    <script>
      get panelDitection (): string {
        return this.$q.screen.lt.sm ? 'column' : 'row'
      }
    
    

    or maybe

    <div :class="panelDitection">
       <Class class="col cardClas" v-for=...>
    
    ......
    
    <script>
      get panelDitection (): string {
        return this.$q.screen.lt.sm ? 'column' : 'row'
      }
    
    

    But non of this method seems be good. I don’t thing adding class col here is good idea, but I don’t know what different I can to do.


Log in to reply