title: Bootstrap CSS for two classes
body: <p>I have a <code>div</code> tag with <code>.col-xs-12 .col-md-4</code> and <code>.left</code>. I want that when the application is started in a pc, the application use the CSS for <code>.col-md-4</code> <code>.left</code>, and when is started in a smarthphone, only use <code>.col-xs-12</code> CSS.</p>
  
  <p>I already test this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.col-md-4.left {
    text-align: left;
  }
  
  .col-xs-12 {
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-xs-12 col-md-4 left"&gt;
    My Test
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The idea is that when the application is in a pc, the <code>div</code> will be a <code>.col-md-4</code> with <code>text-align: left</code>, and in a smarthphone will be <code>-col-xs-12</code> with  <code>text-align: center</code></p>