Vuetifyグリッドシステムの行管理

Question

特定の列の行の配置方法を変更しようとしています。添付の画像にあるように、配置された行の上に赤いカードアイテムを広げたいのですが、どうすればよいのかわかりません。青のカードアイテムは、図のように空白を残すのではなく、一番下に移動します。 これがコードです：

Codepen

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
  })
})

<div id="app">
    <v-app id="inspire">
        <v-container fluid>
            <v-row>
                <v-col cols="4" class="d-flex child-flex">
                    <v-card color="orange lighten-2" tile flat>
                        <v-card-text>Card 1</v-card-text>
                    </v-card>
                </v-col>
                <!--         triple colum here-->

                <v-row class="flex-column">

                    <v-col class="d-flex child-flex">
                        <v-card color="Indigo lighten-2" dark tile flat>
                            <v-card-text>Card 3 Extended To fit</v-card-text>
                        </v-card>
                    </v-col>

                    <v-col class="d-flex child-flex">
                        <v-card color="Indigo lighten-2" dark tile flat>
                            <v-card-text>Card 3 Extended To fit</v-card-text>
                        </v-card>
                    </v-col>

                    <v-col class="d-flex child-flex">
                        <v-card color="Indigo lighten-2" dark tile flat>
                            <v-card-text>Card 3 Extended To fit</v-card-text>
                        </v-card>
                    </v-col>
                    <!--        next col -->
                </v-row>

                <v-col cols="4">
                    <v-card color="red lighten-2" dark tile flat>
                        <v-card-text>
                          {{ lorem }} {{ lorem }} 
                          {{ lorem }}{{ lorem }} 
                          {{ lorem }} {{ lorem }}
                      </v-card-text>
                    </v-card>
                </v-col>

                <!--         bottom row -->
                <v-col cols="4" class="d-flex child-flex">
                    <v-card color="purple lighten-1" tile flat>
                        <v-card-text>{{lorem}}</v-card-text>
                    </v-card>
                </v-col>

                <v-col cols="4" class="d-flex child-flex">
                    <v-card color="green lighten-2" tile flat>
                        <v-card-text>{{lorem}}</v-card-text>
                    </v-card>
                </v-col>

                <v-col cols="4">
                    <v-card color="blue lighten-2" tile flat>
                        <v-card-text>{{lorem}} {{lorem}}</v-card-text>
                    </v-card>
                </v-col>

            </v-row>
        </v-container>
    </v-app>
</div>

Answer 1

これがお役に立てば幸いです。

https://codepen.io/Derek_Robertson/pen/NWPmwMK

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>

      <v-layout row wrap>
        <v-flex d-flex xs12 sm4 child-flex>

            <v-layout row wrap>
      <!-- tutaj jest sie zaczyna gorna czesc-->
              <v-flex d-flex xs12 sm12 child-flex>
                <v-card color="orange lighten-2" tile flat>
                  <v-card-text>Card 1</v-card-text>
                </v-card>
              </v-flex>

              <v-flex d-flex xs12 sm12 child-flex>
                <v-card color="purple lighten-1" tile flat>
                  <v-card-text>{{lorem}}</v-card-text>
                </v-card>
              </v-flex>

          </v-layout>
        </v-flex>

        <v-flex d-flex xs12 sm2 child-flex>

            <v-layout row wrap>
      <!-- tutaj jest sie zaczyna gorna czesc-->
              <v-flex d-flex xs12 sm12>
                <!--tutaj sie wrapuje na row, w sensie zamiast na jednym rowie robia sie dwa rowy tak zeby zmatchowac wielkosc tych kolun obok-->
                <v-layout row wrap>
                  <v-flex d-flex>
                    <v-card color="Indigo lighten-2" dark tile flat>
                      <v-card-text>Card 2  Extended To fit</v-card-text>
                    </v-card>
                  </v-flex>
                   <v-flex d-flex>
                    <v-card color="Indigo lighten-2" dark tile flat>
                      <v-card-text>Card 3  Extended To fit</v-card-text>
                    </v-card>
                  </v-flex>
                   <v-flex d-flex>
                    <v-card color="Indigo lighten-2" dark tile flat>
                      <v-card-text>Card 4 Extended To fit</v-card-text>
                    </v-card>
                  </v-flex>

                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 child-flex>
                <v-card color="green lighten-2" tile flat>
                  <v-card-text>{{lorem}}</v-card-text>
                </v-card>
              </v-flex>

          </v-layout>
        </v-flex>

        <v-flex d-flex xs12 sm6 child-flex>

            <v-layout row wrap>
      <!-- tutaj jest sie zaczyna gorna czesc-->
              <v-flex d-flex xs12 sm12 style="min-height:156px;" >
                <v-card color="red lighten-2" dark tile flat>
                  <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
                </v-card>
              </v-flex>

              <v-flex xs12 sm12 child-flex>
                <v-card color="blue lighten-2" tile flat>
                  <v-card-text>{{lorem}} {{lorem}}</v-card-text>
                </v-card>
              </v-flex>

          </v-layout>
        </v-flex>
       </v-layout>
    </v-container>
  </v-app>
</div>