title: How to display result of map in two different columns
body: <p>I have a task, but i couldnt get the solution for it in reactjs. I would like to show the result in two columns like: So every next element should be added in the second column, but the first column should be limited to 2 rows.</p>
  <pre><code>item 1 | item 4
  item 2 | item 5
         | item 6
  </code></pre>
  <p>When i loop through the array the columns are getting divided into equal order, but as you see in the diagram i need to split them in 2:3 ratio.
  I am giving the sandbox link here on what i have tried so far.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Example class component
  class Thingy extends React.Component {
    render() {
    const secondaryNav = [
      {
        title: "Games",
        name: ["Roadrash", "Prince of Persia", "Counter Strike"]
      },
      {
        title: "Resources",
        name: ["Images", "Videos", "E-books"]
      },
      {
        title: "Shop",
        name: ["Shop now"]
      },
      {
        title: "Account",
        name: ["Log In", "Register"]
      },
      {
        title: "Support",
        name: ["Email", "Call Us", "Get a callback"]
      }
    ];
      return (
        &lt;div className="App"&gt;
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            {secondaryNav.map((item, i) =&gt; {
              return (
                &lt;div className="col-lg-6 col-md-6"&gt;
                  &lt;h3&gt;{ item.title }&lt;/h3&gt;
                  &lt;ul&gt;
                    {item.name.map((items, i) =&gt; {
                      return &lt;li&gt;{items}&lt;/li&gt;
                    })}
                  &lt;/ul&gt;
                &lt;/div&gt;)
            })}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      )
    }
  }
  
  // Render it
  ReactDOM.render(
    &lt;Thingy title="I'm the thingy" /&gt;,
    document.getElementById("react")
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="react"&gt;&lt;/div&gt;
  
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
  integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
  crossorigin="anonymous"&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://ueknl.csb.app/" rel="nofollow noreferrer">SANDBOX</a></p>