CSS Media Query

1st we will write media query to hide things on mobile

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Media Queries</title>

    <style type="text/css">
        /* Default styles for all divs */
        div {
            text-align: center;
            padding: 20px;
            font-size: 20px;
        }

        /* Styles for the desktop div */
        @media screen and (min-width: 1201px) {
            .desktop {
                display: block;
            }
            .tablet, .mobile {
                display: none;
            }
        }

        /* Styles for the tablet div */
        @media screen and (min-width: 801px) and (max-width: 1200px) {
            .tablet {
                display: block;
            }
            .desktop, .mobile {
                display: none;
            }
        }

        /* Styles for the mobile div */
        @media screen and (max-width: 800px) {
            .mobile {
                display: block;
            }
            .desktop, .tablet {
                display: none;
            }
        }
    </style>
</head>
<body>

<div class="desktop">
    This will show on desktop
</div>

<div class="tablet">
    This will show on tablet
</div>

<div class="mobile">
    This will show on mobile
</div>

</body>
</html>