使用 Flexbox 或 Grid 的特定商品订单

Question

我正在尝试按特定顺序为 2 个不同的视图订购项目。我为此使用 Vuetify。

首先我们有一个移动视图，非常简单。我正在按照移动优先原则开发我的网络应用程序：

+---------------------------------------------------------+
| +-----------------------------------------------------+ |
| |                          1                          | |
| +-----------------------------------------------------+ |
| +-----------------------------------------------------+ |
| |                          2                          | |
| +-----------------------------------------------------+ |
| +-----------------------------------------------------+ |
| |                          3                          | |
| +-----------------------------------------------------+ |
| +-----------------------------------------------------+ |
| |                          4                          | |
| +-----------------------------------------------------+ |
| +-----------------------------------------------------+ |
| |                          5                          | |
| +-----------------------------------------------------+ |
| +-----------------------------------------------------+ |
| |                          6                          | |
| +-----------------------------------------------------+ |
+---------------------------------------------------------+

接下来将是用于更大屏幕的中等视口视图：

+---------------------------------------------------------+
| +-------------------------+ +-------------------------+ |
| |            1            | |            6            | |
| +-------------------------+ +-------------------------+ |
| +-------------------------+                             |
| |            2            |                             |
| +-------------------------+                             |
| +-------------------------+                             |
| |            3            |                             |
| +-------------------------+                             |
| +-------------------------+                             |
| |            4            |                             |
| +-------------------------+                             |
| +-------------------------+                             |
| |            5            |                             |
| +-------------------------+                             |
+---------------------------------------------------------+

我尝试了一些 Flex 和 grid 的方法，但找不到一个好的、简单的解决方案。

Answer 1

更新：现在我真的觉得很愚蠢，现在只找到这个简单的解决方案。基本上我可以用网格来解决这个问题。我将前 5 个项目包含在

<VCol>

中，第 6 个项目单独包含在

<VCol>

中。

<template>
  <VRow>
    <VCol
      cols="12"
      md="6"
    >
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
    </VCol>
    <VCol
      cols="12"
      md="6"
    >
      <div>item 6</div>
    </VCol>
  </VRow>
</template>

如果有人知道更优雅的解决方案，我将不胜感激