title: How do I make .py-md-6 override .p-3 in Bootstrap 4?
body: <p>I defined </p>
  
  <pre><code>.py-md-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;  
  }
  </code></pre>
  
  <p>And I have an element (HAML)</p>
  
  <pre><code>#id.p-3.py-md-6
  </code></pre>
  
  <p>However it shows that the <code>.p-3</code> class overrides the <code>.py-md-6</code> class. </p>
  
  <p>I tried to put the <code>.py-md-6</code> before the <code>.p-3</code> but it didn't work. I tried to use <code>.p-sm-3</code> instead but it's defined with <code>@media (min-width: 576px)</code> and still overrides the <code>.py-md-6</code>. </p>
  
  <p>I want small padding on mobile (because there's not a lot of screen space), and I want large padding on desktop.</p>
  
  <hr>
  
  <p>I tried one of the answers which works in CodePly, but it's not working locally.</p>
  
  <p><a href="https://i.stack.imgur.com/fcdDt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fcdDt.png" alt="enter image description here"></a></p>