@media (max-width: 767px) should affects on 767px and less, but I was having problems with it because it wasn't applying my CSS on 767px. After a long while testing I noticed is working fine on Windows 7 but not on Windows 10.
I have Chrome (v54.0.2840.71 m) in both OS. I tested it in Firefox as well and I've the same problem if I run it on Win10.
Here is the jsfiddle.
As you can see, the min-width is working fine, so I can fix it reverting my CSS and working from lowest resolution to highest... It's just an annoying solution. I was wondering if someone knows another way to fix that. I have tried max-device-width also but still working wrong...
Thanks
UPDATE (03-Jun-2019)
As pointed out by sKopheK, it seems now with max-width: 767.9px would be enough, otherwise it will round it to 768px.
Original Answer
Well, thanks to this link posted by Vladimir Pittner I found a valid solution. One of the comments says to put the max-width value as a float. So instead of 767px you can put 767.999px and it seems to be working fine.