Twitter bootstrap layout breaks in Chrome

Question

i'm trying to create a portfolio kind of style layout, with different widths for the columns.

The issue i'm having is that the layout breaks in the row that has a 5col div on the left and a 7col on the right.

When it's the other way around (7col | 5col) it seems to work fine. That's a weird behaviour.

Does anyone know why this might be happening?

To demo this bug, just resize your window.

http://codepen.io/anon/pen/lqsgC

Cheers, Thales Macedo

Answer 1

It doesn't exactly "break", what happens is actually intended behavior.

You are using the .col-md-* which means that columns will be formed only if the viewport is "medium" as defined by TBS3 . Otherwise, they will stack. This is what you are observing because resizing the window eventually leads to a small (or extra-small) viewport and the columns will display stacked.

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row .

If you would like for the columns to always show up, you need to use .col-xs-* instead.