title: Bootstrap Grid For Social Icons
body: <p>I'm struggling with understanding columns in relation to rows due to a listing of say social icons. Right now I have them displayed in one row in lg view size and and wanting them to stay in one row in medium view sizes and in small and extra small view sizes I want them to be listed in 2 rows of 3 so 6 columns.</p>
  
  <pre><code>&lt;div class="row"&gt;
              &lt;div class="col-lg-1 col-lg-offset-3 col-md-offset-6 col-md-1"&gt;
                  &lt;a href=""&gt;&lt;i class="fa fa-behance-square fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-1 col-md-1"&gt;
                  &lt;a href=""&gt;&lt;i class="fa fa-linkedin-square fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-1 col-md-1"&gt;
                  &lt;a href=""&gt;&lt;i class="fa fa-twitter-square fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-1 col-md-1"&gt;
                  &lt;a href=""&gt;&lt;i class="fa fa-skype fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-1 col-md-1"&gt;
                  &lt;a href=""&gt;&lt;i class="fa fa-facebook-square fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-1 col-md-1"&gt;
                  &lt;a href=""&gt;&lt;i class="fa fa-github-square fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>