css - 水平ナビゲーション (ul) を 2 行に分割しようとしています

Question

PureCSSを使用して、レスポンシブな水平から垂直へのメニューの例を自分のニーズに合わせて変更しようとしています。

水平ナビゲーションを 2 行に分割したいのですが、このStackoverflow answerで説明されているように、css3 列を使用しようとして失敗しました。

どうすればこれを解決できますか？たぶん、PureCSS が設定したものをオーバーライドする必要がありますか?

このプランカーを参照してください。幅が 1024px 未満の場合、水平ナビゲーションは非表示になるため、(水平) ナビゲーションが表示されるように幅を広げてください (小さいサイズの垂直ナビゲーションもありますが、これは興味深いものではありません)。

関連する (自作の) CSS は次のとおりです。

.pure-menu-list {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-position: inside;
    text-align: center;
}

HTML:

  <div class="custom-wrapper pure-g" id="menu">
    <div class="pure-u-1 pure-u-lg-1-5">
      <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Braand</a>
        <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
      </div>
    </div>
    <div class="pure-u-1 pure-u-lg-4-5">
      <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
          <li class="pure-menu-item"><a href="/1" class="pure-menu-link">Navlink number 1</a></li>
          <li class="pure-menu-item"><a href="/2" class="pure-menu-link">Navlink number 2</a></li>
          <li class="pure-menu-item"><a href="/3" class="pure-menu-link">Navlink number 3</a></li>
          <li class="pure-menu-item"><a href="/4" class="pure-menu-link">Navlink number 4</a></li>
          <li class="pure-menu-item"><a href="/5" class="pure-menu-link">Navlink number 5</a></li>
          <li class="pure-menu-item"><a href="/6" class="pure-menu-link">Navlink number 6</a></li>
          <li class="pure-menu-item"><a href="/7" class="pure-menu-link">Navlink number 7</a></li>
          <li class="pure-menu-item"><a href="/8" class="pure-menu-link">Navlink number 8</a></li>
          <li class="pure-menu-item"><a href="/9" class="pure-menu-link">Navlink number 9</a></li>
          <li class="pure-menu-item"><a href="/10" class="pure-menu-link">Navlink number 10</a></li>
        </ul>
      </div>
    </div>
  </div>