Because Bootstrap gives the possibility of managing styles from classes, I was wondering if I could remove the column padding on mobile only with bootstrap classes.
You can remove padding on larger screens by using for example px-lg-0 but it seems that you can't get the same result with smaller screen.
I tryed px-0 px-lg-1 , px-0 px-lg-2 or px-0 px-lg-3 but none of them have the same padding as the original column padding.
You can see the issue in the snippet below by running it on full screen with a width >= 992px.

.container{
  border:3px solid orange;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
  <div class="container">
    <div class="row">
      <div class="col-12 bg-light text-dark">A</div>
      <div class="col-12 bg-dark text-light px-0 px-lg-2">B</div>
      <div class="col-12 bg-light text-dark px-0 px-lg-3">C</div>
  </div>
</div>