使用Vuetify安排或订购v-flex组件

Question

如上图所示，我无法按照自己在网格中所需的方式来堆叠或订购v-flex组件。基本上，当屏幕尺寸更改为md时，我需要第三个v-flex（v-flex 3）堆叠在右侧。

我已经花了几个小时弄弄了这个，但被困住了。我希望这是有道理的。谢谢。

Answer 1

这是达到所需结果的方法：

<v-layout row wrap justify-center>

    <v-flex md6><v-btn block dark>1</v-btn></v-flex>
    <v-flex md6><v-btn block dark>2</v-btn></v-flex>
    <v-flex xs12 md6 order-md2><v-btn block dark>3</v-btn></v-flex>
    <v-flex xs10 md6 order-md1><v-btn block dark>4</v-btn></v-flex>

</v-layout>

您可以了解有关Here的更多信息。

这是一个Codepen。

通过添加justify-center，您可以确保当v-flex未获得整行时，它仍然看起来不错（在本例中为中间）。您还可以通过使用order-{screenBreakpoint}{order}控制网格项目的排序，因此在这种情况下，我将order-md2用于3rd v-flex，将order-md1用于4th v-flex。

中等尺寸屏幕上的订单：

较小尺寸屏幕上的订单：