How to have different CSS for a class depending on both col-sm-6 and col-xs-12 in Twitter Bootstrap 3?

Question

I am currently using Twitter Bootstrap 3 to design a contact form in a responsive way. My HTML is the following one :

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-6 logo">
            <img src="./img/logo.png" alt="">
        </div>
        <div class="col-md-6 col-sm-6">
            <p class="keywords">Originaux, uniques et faits-main, <br>
            des cadeaux pour toutes les occasions.
            </p>
        </div>
    </div>
</div> 

And my CSS :

.col-xs-12 > .keywords{
            margin-right: auto;
            margin-left: auto;
            text-align: center;
            vertical-align: middle;
            font-size: 115%;

        }

        .col-sm-6 > .keywords{
        display: table-cell;
        float: none;
        height: 230px;
        text-align: center;
        vertical-align: middle;
        font-size: 120%;
        }

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.

Any idea to separate the CSS applied to my .keywords class depending on the mother class (col-xs-12 or col-ms-6) ?

Answer 1

Bootstrap col-*-* classes rely on media queries to resize them.

You'll need to use the same technique. Start by styling `.keywords' and then tweak it as the device gets bigger (mobile first).

.keywords{
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  vertical-align: middle;
  font-size: 85%;
}

@media (min-width : 768px) {
  .keywords{
    display: table-cell;
    float: none;
    height: 230px;
    text-align: center;
    vertical-align: middle;
    font-size: 120%;
  }
}

Demo