Here is my solution, use media queries to detect width less than 500px or any size according to your design.

CSS written inside @media(max-width:500px) {} will work only on devices with width less than 500px

Note that it is important to write the following CSS in given order. If the order is reversed, the last CSS will override the CSS written inside media queries

.mobile-center-desktop-left {
  text-align: left;
}

@media(max-width:500px) {
  .mobile-center-desktop-left {
    text-align: center;
  }
}

<div class="mobile-center-desktop-left">
  <button>ff</button>
  <button>ff</button>
  <button>ff</button>
  <div>

How can I have an element left aligned on the desktop and centered on mobile?