List beside Map

You can do this with CSS.

I did it using Bootstrap framework (the site is still under development, so I can’t give you the link):

<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">[bgmp-map categories="name"]</div>
<div class="col-xs-12 col-sm-6 col-md-8">[bgmp-list categories="name" viewonmap="true"]</div>
</div>

This makes the map appears on the left and the list on the right, and in small devices it stackes again.

If you are not using Bootstrap, something like the code below might work. Or you can see if your theme has responsive classes and apply them.

HTML

<div class="container">
<div class="map">[bgmp-map categories="name"]</div>
<div class="list">[bgmp-list categories="name" viewonmap="true"]</div>
</div>

CSS

.container .map,
.container .list {
   width:50%;
   position:relative;
   float:left;
}