title: Bootstrap: how to not have text-right in certain size?
body: <p>Using Twitter Bootstrap, when I reduce the size of my browser to XS size. This is my footer. I have the <code>text-right</code> property to handle the rest of the screen sizes, but on XS, it still aligns it to the right after stacking.</p>
  
  <p><strong>How do I get this to not <code>text-right</code> on XS screen sizes?</strong></p>
  
  <p><img src="https://i.stack.imgur.com/v8Oyx.png" alt="enter image description here"></p>
  
  <pre><code>&lt;footer&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6 col-sm-6 col-xs-12 copyright"&gt;
                  &lt;p&gt;&amp;copy; 2014 LFDate. All rights reserved.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6 col-sm-6 col-xs-12"&gt;
                  &lt;ul class="list-inline text-right"&gt;
                      &lt;li&gt;&lt;p&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;&lt;a href="#"&gt;Press&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;&lt;a href="#"&gt;Jobs&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;p&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>