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

[Ewa]

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.