How can I create multiple rows using semantic markup in Bootstrap 3?

Answer 1

The problem you describe is documented here: http://getbootstrap.com/css/#grid-responsive-resets

The grid-responsive-resets add additional div's to your html which will break your semantic markup.

I have never tried to append (for example with :after) the grid-responsive-resets properties conditional. With conditional i mean every fourth element for the md-grid. Theoretical i think i should be possible, we should ask @ScottS maybe :)

Something like this (won't work, example)

.col-md-3:nth-child(4n+0):after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Alternative is to give all your panels the same height, which don't work if you don't know the max possible height in the case of dynamic content. If you don't know the max height you could fix this with javascript / jQuery. (see: https://stackoverflow.com/a/19777087/1596547)