How do I make .py-md-6 override .p-3 in Bootstrap 4?

I defined

.py-md-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;  
}

And I have an element (HAML)

#id.p-3.py-md-6

However it shows that the .p-3 class overrides the .py-md-6 class.

I tried to put the .py-md-6 before the .p-3 but it didn't work. I tried to use .p-sm-3 instead but it's defined with @media (min-width: 576px) and still overrides the .py-md-6.

I want small padding on mobile (because there's not a lot of screen space), and I want large padding on desktop.

I tried one of the answers which works in CodePly, but it's not working locally.

How do I make .py-md-6 override .p-3 in Bootstrap 4?

3 Answers