Vertical navbar on desktop and horizontal on mobile with bootstrap3 3

Question

I am trying to design basically a navbar that is vertical on desktop and horizontal on mobile.

Desktop:

Mobile:

My basic idea is to use a media query to make the elements inline-block for mobile:

@media (min-width: @screen-sm-min) {
  .fluid-inline{
    display: inline-block;
  }
}

My doubt is with the markup.

I know it should be something along the following lines:

<div class="container-fluid">
    <div class="row fluid-inline">
        <div class="col-xs-3 col-sm-12">one</div>
        <div class="col-xs-3 col-sm-12">two</div>
        <div class="col-xs-3 col-sm-12">three</div>
    </div>
    <div class="map-container row fluid-inline">
        <div id="map" class="">

        </div>
    </div>
</div>

This is somehow working but broken, the part that is breaking is the map container, might have something to do with the rows being inline?

Tried something like this:

<div class="col-sm-12">
    <div id="map" class="">

    </div>
</div>

But also not sure.

So my question is basically how the boostrap markup should be, what should be a row, and the cols I have to use.

Here is a live example.

Please note that this markup is not definitive and what I'm looking for is correct markup, so don't hesitate to restructure completely.

Also, I don't really need the actual code, the idea of the correct structure should be enough.

Answer 1

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>

1. 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 simple li for them, and style them.
2. You do not necessarily need another row for your map, this is actually where your problem is. Instead, you should define another col and manipulate it with col-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.