css - 如何为具有不同屏幕尺寸的所需输出安排行和列 :

Question

我尝试搜索这个，可能是我使用了错误的术语，但我找不到任何关于如何执行此操作的文档:

在大屏幕上我想要以下输出:

在较小的屏幕上我想要这样的输出: **编辑:Div 3 & 4 应该说 6 列，而不是 4。

    <v-row>
      <v-col cols="12" lg="8" md="12" class="mb-4">
        <v-row>
          <v-col cols="12">
            DIV 1
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="12">
            DIV 2
          </v-col>
        </v-row>
      </v-col>
      <v-col lg="4" md="6" sm="6" cols="12" class="mb-4">
        <v-row>
          <v-col sm="12">
            DIV 3
          </v-col>
        </v-row>
        <v-row>
          <v-col sm="12">
            DIV 4
          </v-col>

        </v-row>
      </v-col>

    </v-row>

现在的问题是当前代码 Div 3 & 4 是不同的行，而不是在同一行中。

Answer 1

第 3 列和第 4 列应该在同一 v-row 并添加 cols="6"lg="12"...

       <v-col lg="4" cols="12" class="mb-4">
           <v-row>
               <v-col cols="6" lg="12" class="blue"> DIV 3 </v-col>
               <v-col cols="6" lg="12" class="blue"> DIV 4 </v-col>
           </v-row>
       </v-col>

Demo