What about this structure?
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-1 col-md-1 col-lg-1">
<ul class="my-menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="col-xs-12 col-sm-11 col-md-11 col-lg-11">
<div class="map-container">
<div id="map"></div>
</div>
</div>
</div>
</div>
- I don't think it is a good idea to put the navigation items inside a bootstrap's
col-x-n
classes. You should use a simpleli
for them, and style them. - You do not necessarily need another
row
for your map, this is actually where your problem is. Instead, you should define anothercol
and manipulate it withcol-x-n
classes based on the screen size.
When there are two col-x-12
classes in a single row
, the page renders them as stacked each other (what you need on mobile, nav on top, map on bottom).
Here is the demonstration.