layer slider display

Hi
I’m trying to display one layer slider on mobile only and the other on all other devices, but it won’t block.

I used
@media only screen and (min-width: 478px) {
#layer_slider_2 {
display: none !important;
}
}

@media only screen and (max-width: 477px) {
#layer_slider_1 {
display: none !important;
}

#layer_slider_2 {
display: block !important;
}
}

I noticed the id’s are funny too. They sometimes appear with underscore and then they don’t?

Thanks for your help.