Question

I have a responsive layout using Twitter Bootstrap with two columns.

• div #charts shows some charting
• div #grid shows a table with text

Problem: On smaller devices (e.g. Ipad, Iphone) the table gets very small and very long (due to word wrap).

Question: Can I force the grid-div to be shown BELOW the chart-div on small devices?

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8" id="charts">
             some charting
        </div>
        <div class="span4" id="grid">
             table with pager
        </div>
    </div>
</div>

Answer 1

this is what media queries are for. Determine your breakpoint and apply the proper styles:

/* change the max-width to the width when your table becomes unreadible i.e. 1024px or 768px */
@media screen and (max-width: 1024px){
    #charts, #grid{
        width:100%;
    }
}

This is how Bootstrap does it in bootstrap-responsive.css.