Breaking one big list into horizontal multi-column list Bootstrap 3

Question

I'm trying to break two ul lists of jobs under the two headers, "Job Categories" and "Job Function,"into multiple columns, columns not necessarily the same height, and responsive. Otherwise, the single column lists are too long. These two headers and lists should be inline (horizontal). This obviously needs to be responsive for mobile as well.

What's the best way to do this? Visual example below:

Solution

Using the grid system, one could "break-up the cells" of the bootstrap grid system:

<div class="container">
      <!--  Content Area-->
      <div class="row">
        <div class="col-md-5 col-sm-6">
          <div class="row">
            <h2 class="">Job Functions</h2>
          </div>
          <div class="row">
            <div class="col-md-4 col-sm-4">
              <div class="row content">
                <ul class="list-unstyled">
                 <li>,</li>
                 <li>,</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-sm-4">
              <div class="row content">
                <ul class="list-unstyled">
                 <li>,</li>
                 <li>,</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-5">
          <div class="row">
            <h2 class="">Job Categories</h2>
          </div>
          <div class="row">
            <div class="col-md-4 col-sm-4">
              <div class="row content">
                <ul class="list-unstyled">
                 <li>,</li>
                 <li>,</li>
                </ul>
              </div>
            </div>
            <div class="row">
            <div class="col-md-4 col-sm-4">
              <div class="row content">
                <ul class="list-unstyled">
                 <li>,</li>
                 <li>,</li>
                </ul>
              </div>
            </div>
            <div class="row">
            <div class="col-md-4 col-sm-4">
              <div class="row content">
                <ul class="list-unstyled">
                 <li>,</li>
                 <li>,</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
</div>  

It worked. Enjoy!

Comments

[JBear]

I think it's an over simplification because that just breaks the container into two general sides. It needs to be broken down further. I uploaded an image to the question for a visual.

[TRose]

w3schools.com/bootstrap/bootstrap_grid_examples.asp - You can break down multiple levels and accomplish exactly what you want. You can even tell them what order to stack in if the size of the window is changed.