Hide-for-mobile not working properly

Hi Enfold-team!

First of all – thanks for a great theme and a great support forum!

I have a problem with the hide-for-mobile css.
I have a page with a number of grid rows, a few of them meant to be shown in a regular browser but not on mobile, and vice versa!
I’ve used the following code:

}
@media only screen and (max-width: 767px) {
#show-for-mobile {
display:block !important;
}
#hide-for-mobile {
display:none !important;
}
}
@media only screen and (min-width: 768px) {
#show-for-mobile {
display:none !important;
}
#hide-for-mobile {
display:block !important;
}
}

The code works great with the task to hide elements from mobile screens, but it doesn’t hide elements from larger screens. On larger screens all of the grid rows are present :(

Would be grateful for all help!

Thx in advance / Gore