打破一個大名單爲水平多列列表引導3

Question

我試圖打破兩個頭，「職位類別」和「工作職能，」爲多列下工作兩個UL清單，列不一定相同身高和響應。否則，單列列表太長。這兩個標題和名單內聯（水平）。這顯然需要對移動設備進行響應。

這樣做的最好方法是什麼？下面視覺例如：

Answer 1

使用網格系統，人們可以 「分手細胞」 引導網格系統：

<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> 

它的工作。請享用！

Answer 2

<div class="col-md-6">

引導打破了頁/ DIV分解成12 「列」 類.container內。這樣，你給那個空間的一半，以你的頭之一，這將是移動友好。

我希望這不是一個過於簡單化，但所提供的信息可用時，它似乎是正確的。

Answer 3

試試這個

<ul class="col-md-6 col-sm-6 col-xs-12"> 
    <li class="col-xs-12"><h2>Job Function</h2></li> 
    <li class="col-md-6 col-sm-6 col-xs-12">List 1</li> 
    <li class="col-md-6 col-sm-6 col-xs-12">List 2</li> 
<ul> 

<ul class="col-md-6 col-sm-6 col-xs-12"> 
    <li class="col-xs-12"><h2>Job Categories</h2></li> 
    <li class="col-md-6 col-sm-6 col-xs-12">List 1</li> 
    <li class="col-md-6 col-sm-6 col-xs-12">List 2</li> 
<ul>