Bootstrap 3 - responsive menu w/different alignments for desktop/tablet/mobile?

Question

I'm looking for a template/snippet for Bootstrap 3, that will create a 3-item menu with the following characteristics:

Desktop (1200px+) - 3 vertical columns, centered.
Tablet (~700px) - 3 horizontal columns, image left-aligned, text center-aligned.
Mobile (<400px) - same as tablet, but stacked above each other.

I could do it with individual media queries and hacking out the specific style for each layout... but would like to save some time & future aggravation (the less hand-hacking in a framework, the better).

Here's a screenshot of what I have, and a photoshop mock-up of what I would like to have (can't post the images inline, not enough reputation).

Current: http://imgur.com/ETObiPv

Wanted: http://imgur.com/gC7xb4K

Answer 1

I think this will work for you. DEMO

The main things in this layout are:

1. use of absolute positioning to get the height of the text container to be 100% of the image;
2. use of display: table-cell to accomplish the vertical alignment of the text;
3. use of a small 'hack' that essentially produces an xs breakpoint at 640px.

HTML:

<div class="container menu">
  <div class="row">
    <div class="col-xs-4">
        <div class="row menu-group">
            <div class="menu-img">
                <img src="http://placehold.it/250/e8117f/fff&text=Cool+Widgets" alt="Cool Widget" class="img-responsive" />
            </div>
            <div class="menu-title">
                <div class="tbl">
                    <div class="tcell">
                        <h4>Really Cool Widgets</h4>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- /col-sm-4 -->
    <div class="col-xs-4">
        <div class="row menu-group">
            <div class="menu-img">
                <img src="http://placehold.it/250/05Ed9d/fff&text=Awesome+Gadgets" alt="Awesome Gadgets" class="img-responsive" />
            </div>
            <div class="menu-title">
                <div class="tbl">
                    <div class="tcell">
                        <h4>Awesome Gadgets</h4>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- /col-sm-4 -->
    <div class="col-xs-4">
        <div class="row menu-group">
            <div class="menu-img">
                <img src="http://placehold.it/250/05e9ed/fff&text=Amazing+Stuff" alt="Amazing Stuff" class="img-responsive" />
            </div>
            <div class="menu-title">
                <div class="tbl">
                    <div class="tcell">
                        <h4>Amazing Stuff</h4>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- /col-sm-4 -->
  </div> <!-- /row -->
</div> <!-- /container -->

CSS:

.menu-group { /*styles added to match your mockup*/
    border: 1px solid #000;
    padding: 5px;
    background-color: #ccc;
}
.menu-img {
    position: relative;
    float:left;
    width: 35%; /* adjust to suit but make sure to set the .menu-title left value to the same amount */
}
.menu-title {
    position: absolute;
    left: 35%; /* must match .menu-img width */
    width: 65%;  /* left value + width value must equal 100% */
    height: 100%;   
}
.tbl {
    display: table;
    height: 100%;
    width: 100%;
}
.tcell {
    display: table-cell;
    vertical-align: middle; 
    text-align: center;
    padding: 5px;
}
@media (min-width: 1200px) { 
.menu-img {
    position: relative;
    float:none;
    width:100%;
}
.menu-img img {
    margin: auto;
}
.menu-title {
    position: relative;
    left: 0;
    width: 100%;
}
.tbl {
    display: block;
    height: 100%;
    width: 100%;
}
.tcell {
    display: block;
}
}
@media (max-width:640px){ /* can be any value below 767 */
    .menu [class^="col-xs-"]{
        float:none;
        width:auto;
    }   
}