如何使这些Flexbox列简单起作用？

Question

当宽度> 960px时，此元素看起来很不错，具有三列的行，但是当我小于960px时，卡片默认为一列。

我不确定如何设置样式，以使其具有从三列到两列再到一列的理想行为

社区有什么建议？

注意：这是从https://vuetifyjs.com/en/components/item-groups取消的

密码笔：https://codepen.io/gene-yllanes/pen/gJYqzq?editors=1010

<v-item-group>
  <v-container grid-list-md>
    <v-layout wrap>
      <v-flex
        v-for="n in 9"
        :key="n"
        xs12
        md4
      >
        <v-item>
          <v-card
            slot-scope="{ active, toggle }"
            :color="active ? 'primary' : ''"
            class="d-flex align-center"
            dark
            height="200"
            @click="toggle"
          >
            <v-scroll-y-transition>
              <div
                v-if="active"
                class="display-3 text-xs-center"
              >
                Active
              </div>
            </v-scroll-y-transition>
          </v-card>
        </v-item>
      </v-flex>
    </v-layout>
  </v-container>
</v-item-group>