Align divs with flexbox using quasar classes.

[whoacowboy]

I was wondering if somebody could help me out. I want to align two divs in a row in reverse order if the screen width is greater than 999px and a column in regular order if the screen is equal to or less than 999px. I have an example of it working with POCSS but was wondering if this was possible with quasar?

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

.container {
  display: flex;
  flex-direction: row-reverse;
  .item {
    border: 1px solid #9c0000;
    height: 100px;
    width: 100%;
    line-height: 100px;
    text-align: center;
    font-family: sans-serif;
    font-size: 60px;
  }
}

@media (max-width: 999px) {
  .container {
    flex-direction: column;
  }
}

[dobbel]

@whoacowboy

maybe this will help:
https://quasar.dev/layout/grid/flex-playground

https://quasar.dev/quasar-utils/dom-utils#Introduction