Different Layout based on screen form factors

[paul]

I want a screen based on common components that has a different layout when it’s run a small form factors.
More concrete on larger screens I want a screen that has 2 columns for visualizing master detail structure, left column is a list with master data, right column is the detail data.
On smaller screens I only want to visualize the master data (so, the left column but full screen) and a ‘row click’ should navigate to a dedicated detail screen.
I’m currently doing this with the javascript platform detection which I can use both the in the html and javascript.
So e.g. for the logic of the master/detail:
<div :class="{'col-4': $q.platform.is.desktop, 'col-12':!$q.platform.is.desktop}">
and inside javascript I can provide dedicated handling for a row click in the master list:

 projectItemClicked(item) {
      if (this.$q.platform.is.desktop) {
        if (!canSave) {
          this.selected = item
        }
      } else {
        this.$router.push({ name: 'OrderItemEdit', params: { id: item.id, parentId: this.parentId } })
      }
    },

This works nice but I’m evaluating another approach.
The drawback of the above approach is that I can only make distinction desktop/non-desktop.

• on large tablets I also get the one column layout
• when a destkop uses a small browser window, the layout is still in 2 columns.

I’m aware that flexbox could help here but I’m not understanding how exactly.
With flexbox I could make sure that on small form factors the 2 columns are transposed to rows. Not completely what I want because on small form factors I don’t want to see the second column.
How could I make logic decisions in javascript (as above)?
thanks for the guidance.
paul.

[dnix]

I’m interested in doing the same thing, and if I read this correctly: https://quasar-framework.org/components/window-resize-observable.html then you should be able to do something on onResize() by comparing size.width to your breakpoints.

[paul]

@dnix cool. That’s the way to go I think.