Reverse order of divs as a function of width

I'm currently working on a menu consisting of two parts (see image). On mobile, I'd like to show these menu items stacked from top to bottom, but starting with the bottom menu and ending with the top menu. Is there any (clean) way to do this with CSS or will I have to create two menus and show the correct one depending on page width?

EDIT: To clarify, the image is just to show an example of what I mean. I'm wondering in a more general sense if it's possible to somehow reverse the divs in CSS (without absolute positioning etc).

EDIT 2: Apologies for not adding any code. Here's a small pen that shows the situation: https://codepen.io/anon/pen/GWwrMW

<div class="nav">
  <ul class="nav__top">
    <li>Sub Item 1</li>
    <li>Sub Item 2</li>
  </ul>
  <ul class="nav__primary">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

.nav__top,
.nav__primary {
  list-style: none;
  margin: 0 0 20px 0;
  text-align: right;
  li {
    display: inline-block;
    padding: 10px;
    background-color: #ccc;
  }
}

On mobile, I want the sub items to be displayed underneath the main items.


You can do this with flex and flex-direction: column-reverse, or for more control, using the order property on flex children. But with your example, flex-direction: column-reverse would work.

.nav__top li,
.nav__primary li {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
}

@media (max-width: 420px) {
  .nav {
    display: flex;
    flex-direction: column-reverse;
  }
  .nav li {
    display: list-item;
  }
}
<div class="nav">
  <ul class="nav__top">
    <li>Sub Item 1</li>
    <li>Sub Item 2</li>
  </ul>
  <ul class="nav__primary">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>