How to specify different alignment for different resolutions in bootstrap 3?

Question

css

There is a line with 2 columns, when the screen is xs, can I somehow change the text-align for h3 to center? Without resorting to overriding bootstrap styles, is there a native solution?

<div class="col-md-6 col-sm-6 col-xs-12">
  <h3 class="text-left"></h3>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
  <h3 class="text-right"></h3>
</div>

Answer 1

<h3 class="text-left text-center-xs"></h3>
<h3 class="text-right text-center-xs"></h3>
@media screen and (max-width: 767px) {
  .text-center-xs {
    text-align: center!important;
  }
}