Bootstrap: how to not have text-right in certain size?

Question

Using Twitter Bootstrap, when I reduce the size of my browser to XS size. This is my footer. I have the text-right property to handle the rest of the screen sizes, but on XS, it still aligns it to the right after stacking.

How do I get this to not text-right on XS screen sizes?

<footer>     <div class="container">         <div class="row">             <div class="col-md-6 col-sm-6 col-xs-12 copyright">                 <p>&copy; 2014 LFDate. All rights reserved.</p>             </div>             <div class="col-md-6 col-sm-6 col-xs-12">                 <ul class="list-inline text-right">                     <li><p><a href="#">Blog</a></p></li>                     <li><p><a href="#">Press</a></p></li>                     <li><p><a href="#">Jobs</a></p></li>                     <li><p><a href="#">Contact</a></p></li>                 </ul>             </div>         </div>     </div> </footer> 

Answer 1

Bootstrap 4 has added new css classes for this purpose:

<p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>