title: Change placement of NgbPopover if window is less than X
body: <p>I am using Angular 4 and the Popover component from ng-bootstrap. It's working fine but I am trying to change its placement if window size is less than 600px. I couldn't find an option for that. My setup is similar to this:</p>
  
  <pre><code>import { Component, NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { JsonpModule } from '@angular/http';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  import { NgbdPopoverTplcontent } from './popover-tplcontent';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div class="container-fluid"&gt;
  
      &lt;hr&gt;
      &lt;p&gt;
        This is a demo plnkr forked from the &lt;strong&gt;ng-bootstrap&lt;/strong&gt; project: Angular powered Bootstrap.
        Visit &lt;a href="https://ng-bootstrap.github.io/" target="_blank"&gt;https://ng-bootstrap.github.io&lt;/a&gt; for more widgets and demos.
      &lt;/p&gt;
      &lt;hr&gt;
  
      &lt;ngbd-popover-tplcontent&gt;&lt;/ngbd-popover-tplcontent&gt;
    &lt;/div&gt;
    `
  })
  export class App {
  }   
  
  @NgModule({
    imports: [BrowserModule, FormsModule, ReactiveFormsModule, JsonpModule, NgbModule.forRoot()], 
    declarations: [App, NgbdPopoverTplcontent]
    bootstrap: [App]
  }) 
  export class AppModule {}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;
    Popovers can contain any arbitrary HTML, Angular bindings and even directives!
    Simply enclose desired content in a &lt;code&gt;&amp;lt;ng-template&amp;gt;&lt;/code&gt; element.
  &lt;/p&gt;
  
  &lt;ng-template #popContent&gt;Hello, &lt;b&gt;{{name}}&lt;/b&gt;!&lt;/ng-template&gt;
  &lt;button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content" placement="right"&gt;
    I've got markup and bindings in my popover!
  &lt;/button&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/?p=preview" rel="nofollow noreferrer"><strong>Plunker</strong></a></p>
  
  <p>How can I change the placement to top <code>if window &lt;= 600</code>?</p>