Change overflow mode in small devices on Twitter Bootstrap 3.0

Question

I have a two columns layout with multiple rows, much like a table: I use this layout because I need to align the data into the rows at each level, and it works pretty well. The code looks like the following:

<div class="container">
    <div class="row sectionHeader">
        <div class="col-md-10 col-md-offset-1 text-center">
            <h2>Header</h2>
        </div>
    </div class="row">
    <div class="row">
        <div class="col-md-4 col-md-offset-1 text-center">
            <div class="lead diagramStep text-info">Stuff1</div>
        </div>
        <div class="col-md-4 col-md-offset-1 text-center">
            <div class="lead diagramStep text-info">Stuff2</div>
        </div>
    </div>
</div>

Of course, you have multiple rows with two columns, and this works fine in terms of normal layout, since it guarantees that rows are aligned.

The problem comes when the window is resized: the order in which the cell appears are (vertically)

row1 col1, row1 col2, row2 col1, row2 col2, row3 col1, row3 col2

and so on, while what I would like to have is

row1 col1, row2 col1, row3 col1, row1 col2 row2 col2 row3 col2

So all the first column (all rows) followed by all the second column

How can data be displayed on two columns layout with a "aligned row by row" and still overlap by column on small devices on Bootstrap 3.0?

I don't understand what you're looking to accomplish. Can you post your code or create a [Bootply](http://bootply.com)? — Carol Skelly, Nov 03 '13 at 17:56

Bass Jobsen · Accepted Answer · 2013-11-06T19:58:59.753

Try to use nesting, like:

<div class="container">
    <div class="row">
        <div class="col-md-6 leftside">
            <div class="row">
                <div class="col-xs-12">
                        1
                </div>  
                <div class="col-xs-12">
                        3
                </div>
                <div class="col-xs-12">
                        5
                </div>
            </div>
        </div>
                <div class="col-md-6 rightside">
            <div class="row">
                <div class="col-xs-12">
                        2
                </div>  
                <div class="col-xs-12">
                        4
                </div>
                <div class="col-xs-12">
                        6
                </div>
            </div>
        </div>      
    </div>
</div>

update use jQuery to guarantee col heights are equal for every row (in the medium (md) grid):

//act responsive, see: http://www.quirksmode.org/blog/archives/2010/08/combining_media.html     
if (document.documentElement.clientWidth >=992)
{

    for(var i = 1; i <= $('.col-md-6.rightside .row .col-xs-12').length; i++)
    {
        $('.col-md-6 .row .col-xs-12:nth-child('+ i +')').css('height',
        Math.max(
        $('.col-md-6.leftside .row .col-xs-12:nth-child('+ i +')').height(),
        $('.col-md-6.rightside .row .col-xs-12:nth-child('+ i +')').height()
        ));
    }
}

See also: http://bootply.com/92264 Note i also add an additional class to the col-md-6 columns. Also note document.documentElement.clientWidth to add some responsibility will be weak. Take a look at Enquire.js for a more stable solution.

Is this gonna guarantee that row inside the first col-md-6 will have the same height of the row in the second? I actually have multiple rows, and a fixed n of columns (2) so I don't need to nest columns — Edmondo, Nov 05 '13 at 07:56
no the height is not guaranteed. Could you fix the height or use jquery to set the height? — Bass Jobsen, Nov 05 '13 at 10:41

Change overflow mode in small devices on Twitter Bootstrap 3.0

1 Answers1

Linked