html - how to hide div in mobile devices using boostrap?

Question

I want to hide below div in all mobile devices

<div class="right-col pull-right">
</div>

and I have tried following suggestions already but nothing works: Missing visible-** and hidden-** in Bootstrap v4 Hiding elements in responsive layout?

any one suggest me how can i hide above div using bootstrap? My website url: https://www.smartdirection.co/

Myboostrap version:

<link rel='stylesheet' id='bootstrap-css'  href='https://www.smartdirection.co/wp-content/themes/pickton/css/bootstrap.css?ver=5.6' type='text/css' media='all' />

any help would be appreciated.

Answer 1

Using JavaScript will not work if it is disabled in the user’s browser. This method will also still work in testing, since user agent sniffing is highly unreliable.

Use a CSS media query:

@media only screen and (max-width: 770px) {
    .right-col.pull-right {
        display: none;
    }
}

To hide this particular div only, give it another class of your own, like this:

<div class="mobile-hidden right-col pull-right">
</div>

And change the CSS to:

@media only screen and (max-width: 770px) {
    .mobile-hidden {
        display: none;
    }
}