title: How do I make these Flexbox columns work simply?
body: <p>When width >960px, this element looks great with a row of three columns, but when I go smaller than 960 the cards default to one column.</p>
  
  <p>I am unsure how to style this so that it has a desired behavior of going form three columns, to two columns and then one column</p>
  
  <p>What does the community suggest?</p>
  
  <p>Note: this was lifted from <a href="https://vuetifyjs.com/en/components/item-groups" rel="nofollow noreferrer">https://vuetifyjs.com/en/components/item-groups</a></p>
  
  <p>code pen: <a href="https://codepen.io/gene-yllanes/pen/gJYqzq?editors=1010" rel="nofollow noreferrer">https://codepen.io/gene-yllanes/pen/gJYqzq?editors=1010</a></p>
  
  <p></p>
  
  <pre><code>&lt;v-item-group&gt;
    &lt;v-container grid-list-md&gt;
      &lt;v-layout wrap&gt;
        &lt;v-flex
          v-for="n in 9"
          :key="n"
          xs12
          md4
        &gt;
          &lt;v-item&gt;
            &lt;v-card
              slot-scope="{ active, toggle }"
              :color="active ? 'primary' : ''"
              class="d-flex align-center"
              dark
              height="200"
              @click="toggle"
            &gt;
              &lt;v-scroll-y-transition&gt;
                &lt;div
                  v-if="active"
                  class="display-3 text-xs-center"
                &gt;
                  Active
                &lt;/div&gt;
              &lt;/v-scroll-y-transition&gt;
            &lt;/v-card&gt;
          &lt;/v-item&gt;
        &lt;/v-flex&gt;
      &lt;/v-layout&gt;
    &lt;/v-container&gt;
  &lt;/v-item-group&gt;
  </code></pre>
  
  <p></p>