title: Move exceeding list items to next column in bootstrap
body: <p>I am having a row with two columns as shown in the snippet below.
  Here in <strong>Column 1</strong> there are <strong>7</strong> list items under <code>ul</code> tag.</p>
  
  <p>But i am in the need to show <strong>Only 5</strong> list items in column 1 and the rest of the items should move to the next column.. (i.e to <strong>Column 2</strong>).</p>
  
  <p>How can i achieve the result to move the list items automatically to next column based on the count (here its 5), if the list items exceeding above count (5)..</p>
  
  <p>And the result expected to be only in html and css and there should not be any library like jquery or any other third party.</p>
  
  <p><strong>Current Snippet:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
   &lt;div class="row"&gt;
   &lt;div class="col-xs-4 mr-4"&gt;
   &lt;ul class="list-group"&gt;
    &lt;li class="list-group-item"&gt;List Item 1&lt;/li&gt;
    &lt;li class="list-group-item"&gt;List Item 2&lt;/li&gt;
    &lt;li class="list-group-item"&gt;List Item 3&lt;/li&gt;
    &lt;li class="list-group-item"&gt;List Item 4&lt;/li&gt;
    &lt;li class="list-group-item"&gt;List Item 5&lt;/li&gt;
    &lt;li class="list-group-item"&gt;List Item 6&lt;/li&gt;
    &lt;li class="list-group-item"&gt;List Item 7&lt;/li&gt;
  &lt;/ul&gt;
   &lt;/div&gt;
    &lt;div class="col-xs-4 mr-4"&gt;
   Column-2
   &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Expected Result:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
      &lt;div class="container"&gt;
       &lt;div class="row"&gt;
       &lt;div class="col-xs-4 mr-4"&gt;
       &lt;ul class="list-group"&gt;
         &lt;li class="list-group-item"&gt;List Item 1&lt;/li&gt;
         &lt;li class="list-group-item"&gt;List Item 2&lt;/li&gt;
         &lt;li class="list-group-item"&gt;List Item 3&lt;/li&gt;
         &lt;li class="list-group-item"&gt;List Item 4&lt;/li&gt;
         &lt;li class="list-group-item"&gt;List Item 5&lt;/li&gt;
      &lt;/ul&gt;
       &lt;/div&gt;
        &lt;div class="col-xs-4 mr-4"&gt;
       &lt;ul class="list-group"&gt;
         &lt;li class="list-group-item"&gt;List Item 6&lt;/li&gt;
         &lt;li class="list-group-item"&gt;List Item 7&lt;/li&gt;
      &lt;/ul&gt;
       &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>