title: How do i dissable the bootstrap popover on page resize
body: <p>I am using the <code>bootstrap</code> <code>popover</code> for a <code>drop down</code> menu. Is there any way I could disable the <code>popover</code> function either with <code>css media queries</code> or by <code>jquery</code> on page resize and make the menu visible and vertical in mobile view.</p>
  
  <p>Here is what I've tried:</p>
  
  <pre><code>&lt;a href="#"  id="ble" class="ved" data-placement="bottom" data-toggle="popover" data-content='
  &lt;ul class="nav nav-pill"&gt;
  &lt;li&gt;&lt;a href="#" &gt;home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#" &gt;home&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   '&gt;Toggle popover&lt;/a&gt;
  &lt;/div&gt;
   &lt;script&gt;
   $(document).ready(function(){
  $('#ble').popover({html:true}); 
  $(window).on('resize', function () {
  if ($window.width() &gt; 300) {
     $('#ble').unbind('popover');
   }
    });
       });     
  </code></pre>