title: Split single column into two in Bootstrap
body: <p>I have a panel body that is holding 4 items. Right now they are stacked right on top of each other, so 1 columns with 4 rows. I would like for it to be 2 columns with 2 rows on each column.</p>
  
  <p>I can not seem to figure out a way to do this.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="col-lg-3"&gt;
          &lt;div class="menu-item blue"&gt;
              &lt;div class="panel-heading text-center"&gt;
                  &lt;a&gt;
                      &lt;%--&lt;i class="glyphicon glyphicon-signal"&gt;&lt;/i&gt;--%&gt;
                      &lt;p&gt;My title&lt;/p&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;hr /&gt;
              &lt;div class="panel-body"&gt;
                  &lt;p&gt;&lt;i class="glyphicon glyphicon-credit-card"&gt;&lt;/i&gt;&lt;a href="http://www.google.com"&gt;Test 1&lt;/a&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;i class="glyphicon glyphicon-briefcase"&gt;&lt;/i&gt;&lt;a href="http://www.google.com"&gt;Test 2&lt;/a&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt;&lt;a href="http://www.google.com"&gt;Test 3&lt;/a&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;a href="http://www.google.com"&gt;Test 4&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>