Show content in desktop version and hide it in mobile version. And vice versa

Question

I have a form with two different features, one for mobile and the other for desktop. I don’t know how to set up one to be displayed and another hidden depending on whether the site is on desktop or mobile.

Reading some answers here from the forum I tried the following:

<!-- aparecer no desktop -->
<div class="mobile-hide">
  ------------------------------------------
  <div style="position: fixed; bottom: 0; width:1170px; text-align: center;">
    <?php get_template_part('inc_booking'); ?>
  </div>
  código do 1° formulário, sem necessidade de alteração 
  ------------------------------------------
</div>
<!-- /aparecer no desktop -->

<!-- aparecer no mobile -->
<div class="mobile">
  <div class="desktop-hide">
  ------------------------------------------
    <?php get_template_part('inc_booking'); ?>
  </div>
  código do 2° formulário, sem necessidade de alteração 
  ------------------------------------------
</div>
<!-- /aparecer no mobile -->

But both versions are being presented on both desktop and mobile.

Answer 1

code snippet extracted from bootstrap library:

@media (max-width: 767px) {
    .hidden-xs {
        display: none!important
    }
}
@media (min-width: 768px)and (max-width: 991px) {
    .hidden-sm {
        display: none!important
    }
}
@media (min-width: 992px)and (max-width: 1199px) {
    .hidden-md {
        display: none!important
    }
}
@media (min-width: 1200px) {
    .hidden-lg {
        display: none!important
    }
}

Edit: I put the exact width Hidden-Xs: hide for mobile phones (<768px);

Hidden-Sm: hidden for tablets ( 768px);

Hidden-Md: hide for desktops (>= 992px and < 1200px)

Hidden-lg: hide for desktops (>= 1200px)

information also extracted from bootstrap documentation.

See more in https://getbootstrap.com/css/

Answer 2

Since your page is PHP....

<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Qualquer dispositivo móvel (telefones ou tablets).
if ( $detect->isMobile() ) {
    echo ("<div class=\"mobile\"><div class=\"desktop-hide\">".get_template_part('inc_booking')."</div></div>");
}else{
    echo ("<div class=\"mobile-hide\"><div style=\"position: fixed; bottom: 0; width:1170px; text-align: center;\">".get_template_part('inc_booking')."</div></div>");
}
?>

Mobile_detect.php