Why isn't the media query working?

Question

css

I can't figure out why the request is not working.

Found that if there is a request for Tablet before the request for mobile, it does not work, for example, this code does not work

&-dropdown-facilities {
    margin-top: 30px;
    @media all and (max-width: $smDesktopWidth) {
      order: 3;
      margin-top: 0;
    }

    @media all and (max-width: $tableWidth) {
      margin-top: 30px;
      margin-right: 30px;
    }

    @media all and (max-width: $phoneWidth) {
      margin-top: 20px;
      margin-right: 0;
    }
  }

And this one WORKS

&-dropdown-guests {
    margin-top: 21px;
    @media all and (max-width: $smDesktopWidth) {
      order: 2;
      margin-top: 0;
      margin-right: 30px;
    }

    @media all and (max-width: $phoneWidth) {
      margin-top: 20px;
      margin-right: 0;
    }
  }

This is how it looks in DevTools with a screen of 480px, it applies 768px



The priority changed, moved the code higher or lower, it didn’t help

If you put !important then everything is OK, it applies, but I don’t really want to

Answer 1

Set the min-width condition for tablet

@media all and (min-width: $phoneWidth) and (max-width: $tableWidth) {
      margin-top: 30px;
      margin-right: 30px;
    }

although, in theory, when two rules work on one element, a cascade rule is used, i.e. the rule below applies

Answer 2

You have something with the assembly of styles, I'm almost sure that in the final css file the rules for mobile are higher than for tablets