Including responsive styles in main stylesheet - overriding main styles

Question

Rather than having one huge responsive.css files. I am including the media queries in the same stylsheet to keep everything together, for example i have wizard.css file, with:

 span.crumbsTxt {
   font-weight: normal;
   font-size: 16px;
   line-height: 1.25em;
 }

Then at the bottom of the same wizard.css file, i have:

    /* col-sm - Small tablets */
    @media (min-width: 768px){
         span.crumbsTxt {
         font-size: 14px;
       }
    }

The issue i am having is that all my styles from the media queries are overriding my original styles, even when it doesn't hit the small screen media query.

So in this example i am on a large screen, but for some reason its using all my styles from the media query!

I don't want to use !important, but don't understand why its doing this as it's breaking my whole site!

Thanks

EDIT: Is my media query setup wrong then - what needs to change?

Are my media queries wrong then, what needs to change to avoid my issues? :-

 /* col-xs - mobile screens */
 @media only screen and (max-width: 767px) {}

 /* col-sm - Small tablets */
 @media (min-width: 768px) {}

 /* col-md - Medium screens */
 @media (min-width: 992px) {}

 /* col-lg - Large Desktop screens */
 @media (min-width: 1250px) {}

Seems that my bootstrap.min.css uses min width as well. Any ideas on how i could change the above media queries to solve the overriding issue i am having?

Answer 1

change min-width to max-width
You can also apply a min-width and max-width

@media only screen 
and (min-device-width : 420px) 
and (max-device-width : 780px) 

Also, keep in mind that if two selectors apply to the same element, the one with higher specificity wins.