title: How to have different CSS for a class depending on both col-sm-6 and col-xs-12 in Twitter Bootstrap 3?
body: <p>I am currently using Twitter Bootstrap 3 to design a contact form in a responsive way.
  My HTML is the following one :</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-sm-6 logo"&gt;
              &lt;img src="./img/logo.png" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6 col-sm-6"&gt;
              &lt;p class="keywords"&gt;Originaux, uniques et faits-main, &lt;br&gt;
              des cadeaux pour toutes les occasions.
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>And my CSS :</p>
  
  <pre><code>.col-xs-12 &gt; .keywords{
              margin-right: auto;
              margin-left: auto;
              text-align: center;
              vertical-align: middle;
              font-size: 115%;
  
          }
  
          .col-sm-6 &gt; .keywords{
          display: table-cell;
          float: none;
          height: 230px;
          text-align: center;
          vertical-align: middle;
          font-size: 120%;
          }
  </code></pre>
  
  <p>Currently, my small design centers properly my logo and my paragraph side to side, but the margins applied here are reported on my extra small design (which is stacked) which makes me ENORMOUS margins.</p>
  
  <p>Any idea to separate the CSS applied to my .keywords class depending on the mother class (col-xs-12 or col-ms-6) ?</p>