центр ДИВ при хз, выравнивать направо иначе

Question

У меня есть 2 кнопки:

<div class="row pt-20"> 
     <div class="col-xs-12 col-sm-6 text-right pr-20"> 
      <a href="{!! URL::action('TournamentController@create') !!}" type="button" 
       class="btn border-primary btn-flat text-primary disabled text-uppercase p-10 ">{{ trans('core.see_open_tournaments') }} 
       {{--({{trans('core.soon')}})--}} 
      </a> 
     </div> 
     <div class="col-xs-12 col-sm-6 text-left pl-20"> 
      <a href="{!! URL::action('TournamentController@create') !!}" type="button" 
       class="btn btn-primary text-uppercase p-10">{{ trans('core.create_new_tournament') }} 
      </a> 
     </div> 
    </div> 

То, что я хотел бы достичь, это выровнять вправо/влево, когда разрешение> хз, и выравнивание по центру когда разреш = хз.

Каков наилучший способ достичь этого ???

Я думал о том, чтобы удалить текст вправо в div и использовать медиа-запросы, чтобы сделать это в css, но я думаю, что есть более элегантный способ сделать это, не так ли?

Tx!

Answer 1

Создайте класс text-center-xs и добавить соответствующие стили к пользовательскому стилей:

@media (max-width: 767px) { 
    .text-center-xs { 
     text-align: center; 
    } 
}