title: Combining bootstrap grid options to simplify long div classes
body: <p>I'm using the current version of Bootstrap (v3.3.1). Looking at the grid options, there are many classes to use considering different media breakpoints. </p>
  
  <p>The application I'm working on requires to work on all media type so I have to use all the grid options... <code>.col-xs-</code>   <code>.col-sm-</code>  <code>.col-md-</code>  <code>.col-lg-</code></p>
  
  <p>Typing these into one div class seems a bit excessive and ugly. Is there a way I can combine all 4 grid options to work depending on the media size? </p>
  
  <p>For example, if the class will stretch 12 columns in all media views...can I group them together within a CSS file like so...</p>
  
  <pre><code>.col-12 {
    .col-lg-12{}
    .col-sm-12{}
    .col-xs-12{}
  }
  </code></pre>
  
  <p>And then within the HTML doc, have my div class like so...</p>
  
  <pre><code>&lt;div class="col-12"&gt;
  </code></pre>
  
  <p>instead of doing something like this...</p>
  
  <pre><code>&lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
  </code></pre>