Changing text alignment with page size bootstrap

August 14, 2015

I have two divs centred side-by-side using bootstrap. One div is text-right aligned and the other text-left. I'm trying to get it so that these become centred on top of each other when the page becomes to small to view them side by side. I have tried using @media rule in CSS to deal with this but with no luck. Any suggestions? The HTML so far looks like this:

<div class="container-fluid">
    <div class="col-md-3 col-md-offset-3 text-right">
        <p class="summary">Some summary text</p>
    </div>
    <div class="col-md-3 text-left">
        <p class="description">An extended description</p>
    </div>
</div>

UPDATE!

The CSS relating to the two divs:

/* Summary text */
.summary {
    font-family: 'Stint Ultra Expanded', cursive;
    font-size: 1.5em;
    color: #ffffff;
    text-transform: uppercase;
    opacity: 0.8;
}
/* Description text */
.description {
    font-family: 'Slabo 13px', serif;
    font-size: 1.1em;
    color: #ffffff;
    opacity: 0.8;
}

@media screen and (max-width: 300px) {
    .summary,
    .description {
        text-align: center;
    }
}

Answer

August 14, 2015

KyleMit

300px max width is far too smaller to trigger. If you're using .col-md-3 then the two columns will occupy the full screen width starting at 992px and lower. See the Bootstrap Docs on Media Queries

@media (max-width: 992px) {
    .summary,
    .description {
        text-align: center;
    }
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container-fluid">
    <div class="col-md-3 col-md-offset-3 text-right">
        <p class="summary">Some summary text</p>
    </div>
    <div class="col-md-3 text-left">
        <p class="description">An extended description</p>
    </div>
</div>

If you want to go even smaller than 992px, you can use .col-sm-3 or .col-xs-3 or even come up with your own custom column widths by wrapping them in a media query.