Как установить 2 кнопки рядом друг с другом на мобильном телефоне

Question

Я пытаюсь иметь 2 кнопки рядом друг с другом на мобильном экране. Я не уверен, будет ли хорошей практикой иметь так много кнопок друг над другом, так что если у меня есть 2 рядом друг с другом, я получу немного места и, возможно, это будет выглядеть лучше. Есть идеи, как это сделать?

.demo {
  font-size: .81rem;
  padding: .9rem 31px;
  background-color: #d6aa55;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-around">

  <div class="col-md-7">
    <div class="row mb-5">
      <div class="col-12 ">
        <h2 class="site-section-heading text-center">Gallery</h2>
      </div>
      <div class="flex-wrap btn-group d-flex justify-content-center mx-auto text-center flex-column flex-sm-row portfolioFilter">
        <a href="#" data-filter="*" class="demo my-2 mx-3 current">All</a>
        <a href="#" data-filter=".eyebrows" class="demo my-2 mx-3">Eyebrows</a>

        <a href="#" data-filter=".eyeliner" class="demo my-2 mx-3">Eyeliner</a>

        <a href="#" data-filter=".lips" class="demo my-2 mx-3">Make up of lips</a>
        <a href="#" data-filter=".lips" class="demo my-2 mx-3">Single Viper</a>
        <a href="#" data-filter=".lips" class="demo my-2 mx-3">Volume Viper</a>
        <a href="#" data-filter=".lips" class="demo my-2 mx-3">Hybrid Viper</a>





      </div>
    </div>
  </div>

</div>