UIKit navigation wrapping

I'm attempting to create a responsive navigation with UIKit with left, center, and right elements. This is how the elements look on a large screen:

When resizing the browser, the elements overlap each other instead of wrapping onto new rows:

My goal (on small screens) would be to have the center element move to a top row, and the left/right elements appear underneath. How can I make the navbar responsive?

.uk-navbar-center {
  opacity: 0.7;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.8/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.23/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.23/dist/js/uikit-icons.min.js"></script>

<nav uk-navbar class="uk-flex-wrap">
  <div class="uk-navbar-left uk-margin-medium-left uk-padding-large uk-background-primary">
    <span class="uk-width-large"></span>
  </div>
  <div class="uk-navbar-center uk-padding-large uk-background-secondary">
    <span class="uk-width-large"></span>
  </div>
  <div class="uk-navbar-right uk-margin-medium-right uk-padding-large uk-background-primary">
    <span class="uk-width-large"></span>
  </div>
</nav>

UIKit doesn't support this kind of behavior, you will need to write some custom css styles for this to work the way you want. Something like this:

<nav uk-navbar class="flex-wrap">
  <div class=" uk-background-primary">
    <span class="uk-width-large"></span>
  </div>
  <div class="uk-background-secondary">
    <span class="uk-width-large"></span>
  </div>
  <div class="uk-background-primary">
    <span class="uk-width-large"></span>
  </div>
</nav>

.uk-navbar-center {
  opacity: 0.7;
}

.flex-wrap {
  display: flex;
  flex-direction: row;
  align-content: space-around;
}

.flex-wrap > div {
    width: 33.33%;
     height: 100px;
  }
 

@media only screen and (max-width: 600px) {
  .flex-wrap{
    display: flex;
    flex-direction: column
  }
  .flex-wrap > div {
    width: 100%;
     height: 100px;
  }
  .flex-wrap :nth-child(1){
    order: 2
  }
  .flex-wrap :nth-child(2){
    order: 1
  }
  .flex-wrap :nth-child(3){
    order: 2
  }

}

I took the liberty of removing UIKit classes except colors to display how the flexbox items should behave using the order property without any margins or padding.

When we use a flexbox container, in this case your navbar, we can set the order of how the children items will be displayed using the order property. Here are the docs on how this works:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items