Hide Block on Particular Page with Bootstrap I have a block called 'calendar' that I display on all events pages. events* such as events/today/, events/all/ etc.

A constraint that I have is that the block must be displayed on all events pages but on one particular page. The block must be hidden when the user is using a mobile device.

My thought process was to simply apply the bootstrap 'hidden-xs' class to the block. But the constraint is not satisfied as it would trigger on all the events pages. 

What would be the easiest way to implement this?

Thanks in advance.
You can use combination of media query  to achieve this.Using media query hide the block under mobile resolutions . For example

@media screen and (min-width: 480px) {
.block-class {
    display: none;
  }
}