Instead of just adding this in the shortcode box:
[kadence_slider_pro id="2"]
You can add like this:
<div class="my-desktop-slider">[kadence_slider_pro id="2"]</div> <div class="my-mobile-slider">[kadence_slider_pro id="3"]</div>
This is assuming id=”3″ is the mobile for 2 you would just change that to whatever it needs to be.
Then you would add this CSS in your theme options custom CSS:
.my-mobile-slider {
display:none;
}
@media (max-width: 768px) {
.my-desktop-slider {
display:none;
}
.my-mobile-slider {
display:block;
}
}