I have this nav tag in my website
I want to divide it into two when the device width reached to the specified px in CSS3 media queries.

```css
@media only screen and (max-width: 900px) {
  .nav-links>a {
    float:left;
    width:50%;
  }
}
```

```html
<nav class="nav-links">
    <a href="#">Home</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
    <a href="#">Other</a>
    <a href="#">Other</a>
    <a href="#">Other</a>
    <a href="#">Other</a>
</nav>
```

How can I make it so it will look like 2 lines of navigation link in the frontend. Thanks!