Three-column layout with block of different heights

Question

I have simple 3-column layout based on Twitter Bootstrap. The only problem is, that each column is assembled from block with different heights.

<div class="container">
    <div id="blocks" class="row">
        <div class="span4">
            <div class="block" id="block1">
            <div class="block" id="block4">
            <div class="block" id="block7">
        </div>
        <div class="span4">
            <div class="block" id="block2">
            <div class="block" id="block5">
            <div class="block" id="block8">
        </div>            
        <div class="span4">
            <div class="block" id="block3">
            <div class="block" id="block5">
            <div class="block" id="block9">
        </div>
    </div>
</div>

.

It works quite fine, except for small displays. Then the order of blocks is not sorted.

Is there some way to achieve sorted blocks without any JavaScript?

Answer 1

There is no way to achieve this effect with the 3 column structure. If the blocks were all the same height then you could float:left all the blocks without the columns then they would wrap in order. Since they are not the same size you would have to use a JavaScript such as masonry:

http://masonry.desandro.com/