How do I adapt existing responsive web site to display Leaflet maps?

My website works well on different devices but it seems that only works with images, although I would like to show other media, like Leaflet maps and videos.

Just about all pages are laid out on a grid using classes.

Here is the current html code for one image:

<div class="container">

  <div class="row">
    <div class="col-sm-4">
      <p class="lead">Cityscapes have a uniquely vibrant feel to them which is unlike any other form of landscape. In creating ours we employ a variety of techniques, including hand drawing, watercolor and digital.</p>
      <br><p class="h5 text-right palette-coral">Downtown Manhattan</p>
      <p></p>
    </div>
    <div class="col-sm-8 overlap-sm">
      <p>
        <span class="picturefill-medium" data-picture data-alt="Downtown Manhattan">
          <span data-src="../../img/work/cityscapes/lowerManhattan01_298.jpg"></span>
          <span data-src="../../img/work/cityscapes/lowerManhattan01_482.jpg" data-media="(min-width: 480px)"></span>
          <span data-src="../../img/work/cityscapes/lowerManhattan01_644.jpg" data-media="(min-width: 992px)"></span>
          <noscript>
            <img src="../..../../img/work/cityscapes/lowerManhattan01_298.jpg" alt="Downtown Manhattan">
          </noscript>
        </span>
      </p>
    </div>
  </div>
</div>

Each image has three size versions and depending on the width of the viewer’s screen the right one is loaded.

In the past I tried to display videos in the same framework (span) but I was not able, so I settled for screen shots with links to an external page to see the video.

Now I want to be able to display Leaflet maps on the same grid but I tried various html code and it didn’t work.

For example, I tried the code below, but regardless of the width of the screen the div with 298px is loading:

<span class="picturefill-medium" data-picture data-alt="Downtown Manhattan">
  <span><div id="mapid" style="width:298px; height: 298px;"></div></span>
  <span  data-media="(min-width: 480px)"><div id="mapid" style="width:482px; height:482px;"></div></span>
  <span  data-media="(min-width: 992px)"><div id="mapid" style="width:644px; height: 644px;"></div></span>

</span>

Any advice?

.wrapper {
  height: 300px;
}

#map {
  height: 100%;
}

<span style="width:298px; height: 298px;"><div id="mapid" style="height: 100%;"></div></span>