I'm trying to order items in a specific order for 2 different views. I'm using Vuetify for this.
First we have a mobile view, which is very simple. I'm developing my web app with the mobile-first principle:
+---------------------------------------------------------+| +-----------------------------------------------------+ || | 1 | || +-----------------------------------------------------+ || +-----------------------------------------------------+ || | 2 | || +-----------------------------------------------------+ || +-----------------------------------------------------+ || | 3 | || +-----------------------------------------------------+ || +-----------------------------------------------------+ || | 4 | || +-----------------------------------------------------+ || +-----------------------------------------------------+ || | 5 | || +-----------------------------------------------------+ || +-----------------------------------------------------+ || | 6 | || +-----------------------------------------------------+ |+---------------------------------------------------------+
Next would be a medium viewport view for bigger screens:
+---------------------------------------------------------+| +-------------------------++-------------------------+ || | 1 | | 6 | || +-------------------------++-------------------------+ || +-------------------------+ || | 2 | || +-------------------------+ || +-------------------------+ || | 3 | || +-------------------------+ || +-------------------------+ || | 4 | || +-------------------------+ || +-------------------------+ || | 5 | || +-------------------------+ |+---------------------------------------------------------+
I tried some things out with flex and grid but couldn't find a good and simple solution.