Changing text alignment with page size bootstrap - html

Question

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 1

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.

Answer 2

Give an id to your columns as this will be more specific in your css and overwrite the Bootstrap css.
<div class="container-fluid">
<div id="column-one" class="col-md-3 col-md-offset-3 text-right">
<p>Some summary text</p>
</div>
<div id="column-two class="col-md-3 text-left">
<p>An extended description</p>
</div>
</div>
CSS:
#media screen and (max-width: 300px) {
#column-one, #column-two {
text-align: center;
}
}