JSFiddle - React, Tailwind, and code Playground

by Maciej

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
  <div class="col-xs-12">

    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">click this<b class="caret"></b></a>
          <ul class="dropdown-menu columns">
            <li><a href="#"><strong>Górny Śląsk</strong></a></li>
            <li><a href="#">powiat będziński</a></li>
            <li><a href="#">powiat bielski</a></li>
            <li><a href="#">powiat bieruńsko-lędziński</a></li>
            <li><a href="#">powiat cieszyński</a></li>
            <li><a href="#">powiat częstochowski</a></li>
            <li><a href="#">powiat gliwicki</a></li>
            <li><a href="#">powiat kłobucki</a></li>
            <li><a href="#">powiat lubliniecki</a></li>
            <li><a href="#">powiat mikołowski</a></li>
            <li><a href="#">powiat myszkowski</a></li>
          </ul>
        </li>

      </ul>
    </nav>
    <br>
    <br>
    <span style="color:red">&laquo; click on the edge of frame and move it to the left to see how menu changes into two column</span>
  </div>
</div>

CSS

@media screen and (max-width: 991px) {
  .columns {
    height: 200px;
    overflow-y: scroll;
  }
}

@media screen and (min-width: 992px) {
  .columns {
    -moz-column-count: 2;
    /* Firefox */
    -webkit-column-count: 2;
    /* Safari and Chrome */
    column-count: 2;
    width: 500px;
    height:170px;
  }
}