Disable d-flex justify-content-center for smaller devices

Question

i'm in the process of make a old website responsive

How can I "disable" the bootstrap class of my when I'm using a smaller device? I'd like to disable the d-flex justify-content-center class so that the caption is under the image for small devices.

<table class="table table-borderless ">
  <tbody>
    <tr>
      <td>
        <figure class="figure d-flex justify-content-center">
          <img src="http://christophurwalek.at/index/Wandcollage.jpg" class="figure-img img-fluid rounded imagePreview" alt="A generic square placeholder image with rounded corners in a figure.">
          <figcaption class="figure-caption caption center-block"><a href="###">Test first line<br>Test second
                            line</figcaption>
                </figure>
            </td>
        </tr>

    </tbody>
</table>

I'd like to control it with @media screen for x width/height px. thanks

Answer 1

@media (max-width: 575.98px) {

  // your css here

  }
  
@media (min-width: 576px) and (max-width: 768px) {

   // your css here

}