<div class="container">
  <h1>Chronological With Alpha Index Site Map Template</h1>

  <ul class="nav nav-pills">
    <li role="presentation"><a href="#sec1">Section 1</a></li>
    <li role="presentation"><a href="#sec2">Section 2</a></li>
    <li role="presentation"><a href="#sec3">Section 3</a></li>
    <li role="presentation"><a href="#sec4">Section 4</a></li>
    <li role="presentation"><a href="#secAlpha">Alpha</a></li>
  </ul>

  <div class="row">
    <div class="col-md-8 col-sm-6">

      <section id="sec1">
        <h2>Section 1</h2>
        <div class="row">
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3 ">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
        </div>
      </section>
      <section id="sec2">

        <h2>Section 2</h2>
        <div class="row">
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>

            </ul>
          </div>
          <div class="col-md-3">
            <ul>

            </ul>
          </div>
        </div>
      </section>
      <section id="sec3">

        <h2>Section 3</h2>
        <div class="row">
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>

            </ul>
          </div>
        </div>
      </section>
      <section id="sec4">

        <h2>Section 4</h2>
        <div class="row">
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
        </div>
      </section>

    </div>
    <!--  /col-md-8  -->
    <div class="col-md-4 col-sm-6">

      <section id="secAlpha">
        <h3>Alpha</h3>
        <ul>
          <li><a href="#">Alpha</a></li>
          <li><a href="#">Alpha</a></li>
          <li><a href="#">Alpha</a></li>
          <li><a href="#">Alpha</a></li>
        </ul>

        <h3>Beta</h3>
        <ul>
          <li><a href="#">Beta</a></li>
          <li><a href="#">Beta</a></li>
          <li><a href="#">Beta</a></li>
          <li><a href="#">Beta</a></li>
        </ul>

        <h3>Charlie</h3>
        <ul>
          <li><a href="#">Charlie</a></li>
          <li><a href="#">Charlie</a></li>
          <li><a href="#">Charlie</a></li>
          <li><a href="#">Charlie</a></li>

        </ul>


      </section>
    </div>
    <!--  /col-md-4  -->
  </div>



</div>
<!-- /container -->
section {
  border-bottom: 1px solid #ccc;
  margin-top: 1em;
}

section .col-md-3 {
  border-left: 1px solid #ccc;
  padding-right:13px;
}

section .col-md-3:first-child {
  border: none;
}

@media screen and (max-width: 1200px) {
section .col-md-3 {
  border:none;
}
}
// Adds active state to secion navigation
$('.nav li').click(function(e) {
  //e.preventDefault();
  $('.nav li').removeClass('active');
  $(this).addClass('active');
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js