Created by: ctalkington
I have been using the responsive media queries a lot more lately and I noticed that the way BS currently is ordering media queries, you have to use !important when you want to override anything in tablet to mobile range. I understand BS is a starting point but it should also provide a smart workflow so that you can just add your styling into the responsive less files. My changes allow cascading to take effect and provide a nicer start point for many projects that are starting at desktop and going down to mobile.
It isn't that apparent with the styles BS currently uses, as they don't really target the same things, but once you start trying to adjust things you see what I mean.
In the below sample, by using the new ordering, devices 480px and below would have a blue background and devices 767px and below would have a red background. If it was the other way around, the background would always be red even at 480px unless !important is used which can create a major pain in the neck.
@media (max-width:767px) {
body {
background: red;
color: white;
}
}
@media (max-width:480px) {
body {
background: blue;
font-family: serif;
}
}