title: duplcate id's when hidding content using media query css3
body: <p>Using bootstrap 4 and vuejs
  desktop has a container, with a tab pane and map. On Mobile, I remove the tab pane and just show map.</p>
  <p>Below code is a simple representation of the problem. The tab pane and map are highly interacting on desktop. On mobile I only want to show the map with minimal interactivity because the tab pane is hidden</p>
  <pre><code>           &lt;div class=&quot;d-sm-none&quot;&gt;
                  small
                  &lt;div id=&quot;mapid&quot; style=&quot;width: 100%; height:300px&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;d-none d-md-block&quot;&gt;
                  large
                  &lt;div id=&quot;mapid&quot; style=&quot;width: 100%; height:300px&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  <p>The div that is first, will show. For example, in the above code the map will show on mobile, but not desktop. If I rearrange the code desktop will work and mobile will not.</p>
  <p>Below is my vue code to display map. I use leaflet.</p>
  <pre><code>           this.map = L.map('mapid', {
                  center: this.center,
                  zoom: this.zoom
              });
  </code></pre>
  <p>How do I get this to work?</p>