Vuetify 网格 - 屏幕尺寸中断时列的反向顺序

Question

我有一行 2 列，我想按当前顺序显示。但是，当屏幕尺寸缩小时，我想更改列的顺序，使第二列成为第一列。

<v-row>
    <v-col cols='12' sm='12' md='12' lg='6'>Description</v-col>
    <v-col cols='12' sm='12' md='12' lg='6'><v-img :src="..."/></v-col>
</v-row>

当在较小的屏幕上查看或浏览器按比例缩小时，列会堆叠，我希望第二列移动到顶部。

Full Width
______________________
|          |         |
|   Col1   |   Col2  |
|__________|_________|

Screen Break
____________
|          | 
|   Col2   | 
|__________|
|          | 
|   Col1   | 
|__________|

目前第 1 列在最上面。

Answer 1

你可以使用vuetify's responsive flex order classes来实现这个效果。

例如，您可以在示例中将 class="order-last order-md-first" 放在 Col1 上，这将导致第一个 v-col 在最后一个 flex 位置呈现，直到 md 断点它将在第一个 flex 位置呈现。

运行下面的示例并点击 'Full Page' 以查看实际效果。

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
});

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row class="pa-5">
        <v-col cols="12" md="6" class="order-last order-md-first">Title one</v-col>
        <v-col cols="12" md="6">Title two</v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Vuetify 网格 - 屏幕尺寸中断时列的反向顺序

Vuetify grid - reverse order of columns on screen-size break

css

vuetify.js