Making a map plus sidebar layout responsive

Using a map plus a list of features is a simple, common pattern around the web. This is what Google does when you search for a place:

It's what I've done several times, including my downtown San Diego motorcycle parking map:

And I recently saw it used in a tutorial published by mapbox.

This pattern works well on bigger-than-pocket-sized screens (laptop and up, most tablets in landscape). Once you're down to handheld size, the pattern breaks and it's best to switch to a different layout. My preference is to make the sidebar more of a bottombar and keep the map on top. Here's how the parking map looks on screens less than 480 pixels wide:

CSS media queries as well as some basic CSS make this easy. For this particular site, since I expect it to be used on phones most frequently, the page defaults to the small-screen friendly layout with both sections 100% wide:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {  
  height: 100%;
  width: 100%;
}
#mapContainer, #infoContainer {
  width: 100%;
}
#infoContainer {
  height: 30%;
}
#mapContainer {
  height: 70%;
}

When a screen meets a min-width requirement, the content below the map shifts to the right:

@media screen and (min-width: 480px) {
  #mapContainer, #infoContainer {
    display: inline-block;
  }
  #infoContainer {
    height: 100%;
    width: 30%;
    padding: 1em 0 1em 0;
    text-align: center;
  }
  #mapContainer {
    float: left;
    height: 100%;
    width: 70%;
  }
  #map {
    height: 100%;
  }
}

Here's a bl.ock showing a stripped down version of the motorcycle parking map's layout.

A similar chunk of CSS can be applied to the finished product from the mapbox tutorial linked above to make it more small-screen friendly. In this case the media query is for max-width so large screens are accommodated first but the end result is the same. 660 pixels seems like a good spot for the transition as that's when the info in the sidebar starts to get noticably squished:

/* Switch to map on top info on the bottom on narrow screens */
@media screen and (max-width: 660px) {
  .map, .sidebar {
    height: 50%;
    width: 100%;
  }
  .map {
    top: 0;
    bottom: 50%;
    left: 0;
  }
  .sidebar {
    top: 50%;
    bottom: 100%;
  }
}