I ended up with this in my CSS which seems to do the trick globally.
@media (min-width: 767px) {#secondary-widget-area {display:none;}}
.is-mobile #primary-widget-area {display:none;}
If after this, if I want to hide the secondary widget on mobile for a given page, I suppose I could add what you suggested, but I still don’t know how to hide if it’s a particular post.
.is-mobile.page-id-496 #primary-widget-area {display:none;}