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:

You can see this behavior here. 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?

<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>