[解決済み] Vuetify グリッドレイアウト v-layout v-flex

質問

テキストボックスをsm以上の画面では6カラム、モバイルでは12カラムにしたいのですが、どうすればいいですか？

vuetifyのグリッドを使用していますが、期待通りに動作しません。

これは私のコードです。

<v-card-text>
        <v-layout   warp>
          <v-flex xs12 sm6  class="pa-1">
            <v-text-field
              ref="name"
              v-model="password.name"
              label="Name"
              solo
              placeholder="Full Name"
              counter="25"
            ></v-text-field>
          </v-flex>
          <v-flex xs12 sm6  class="pa-1">
            <v-combobox
              v-model="password.keys"
              label="Add keys"
              chips
              solo
              multiple
            >
              <template slot="selection" slot-scope="data">
                <v-chip :selected="data.selected" close @input="remove(data.item)">
                  <strong>{{ data.item}}</strong>&nbsp;
                </v-chip>
              </template>
            </v-combobox>
          </v-flex>
        </v-layout>

モバイルビューでは、要素が同じ行に並んでいます。

何が原因で、どのように修正すればよいのでしょうか？

こちらはモバイル版です。

解決方法は？

タイプミスがあります。quot;v-layout" は warp ではなく wrap であるべきです。

https://codesandbox.io/s/my49o8vo9y