How to disable css rules on mobile devices

Question

I created a class in a wordpress css file

.leftfloat{ float:left; padding-right:10px; }

I use it in the posts to wrap text around images like so:

<div class ="leftfloat" > image code or ad code </leftfloat>

It's working on PC and mobile devices. However, I want to disable this float in mobile devices. So I did this:

There is already @media defined in the template, I just added .leftfloat {float: none;}

But when I check it, it's not disabling float on mobile devices.

@media screen and (max-width: 860px) {
        .leftfloat {float: none;}
}
@media screen and (max-width: 1020px) {
        .leftfloat {float: none;} }

@media screen and (max-width: 767px) {
        .leftfloat {float: none;}
}
@media screen and (max-width: 620px) {
        .leftfloat {float: none;} }

@media screen and (max-width: 420px) {
         .leftfloat {float: none;}

Answer 1

Your complete CSS looks like:

.leftfloat{
  float:left;
  padding-right:10px;
}
   @media screen and (max-width: 860px) {
   .leftfloat {
     float: none;
   }
 }

 @media screen and (max-width: 1020px) {
   .leftfloat {
     float: none;
   }
 }

 @media screen and (max-width: 767px) {
   .leftfloat {
     float: none;
   }
 }

 @media screen and (max-width: 620px) {
   .leftfloat {
     float: none;
   }
 }

 @media screen and (max-width: 420px) {
   .leftfloat {
     float: none;
   }

As it stands, mobile gets the float: left from your original class because the media queries are all max-width. To set float: none at "mobile" sizes you need to reverse everything, (eg)

.leftfloat {
  float: none;
}

@media screen and (min-width: 420px) {
    .leftfloat {
      float: left;
    }
}