How to effectively unbind() hoverintent() from an element

Question

I'm using the HoverIntent plugin to create hover drop-downs in my Bootstrap 3 navigation. However, for smaller sizes I want to still use the native click trigger to activate the dropdowns and not the hover. I'm trying to use enquire.js, which allows me to call a function when the screen size enters a specified width, and another when it leaves that width. This is my code so far:

enquire.register("screen and (min-width: 767px)", {
 match : function() {
  hoverIntentInit();
 },
 unmatch : function() {
  removeHoverIntent();
 }
});

function removeHoverIntent(){
  // remove the hoverintent() function <-- this is what I need
}

function hoverIntentInit(){
  var config = {
     timeout: 900,
     over: showMenu,
     out: hideMenu};
 $('.dropdown').hoverIntent(config);
}
function showMenu(){
  // code that shows the dropdown (not important)
}
function hideMenu() {
  // code that hides the dropdown (not important)
}

I found a similar question here from few years ago. However, the answers over there either don't work or they they remove both the hoverIntent and the click events from the elements which is not what I want (I want the native Bootstrap click event to remain).

Please help me with this, I've spent more than a day on this and still I can't find a solution.

Thanks!