html - 組積造タイルを上から下ではなく、左から右に配置する

Question

私は今後のプロジェクトの石積みのレイアウトに取り組んでおり、CSS のみを使用して石積みのタイルを上から下ではなく左から右に配置する方法があるかどうかを知りたいです。

jsfiddle でレイアウトを再作成しようとしましたが、出力が異なるように見えるので、代わりにスクリーンショットを撮ることにしました

http://i255.photobucket.com/albums/hh140/testament1234/Masonry_zps8b8519b6.jpg

HTML

<div class="masonry">

    <div class="masonry-columns">
    <h2>1st Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla porttitor. Aenean vitae sapien rutrum, rutrum enim varius, elementum magna. Aliquam sollicitudin accumsan dui, ut faucibus tellus pretium fermentum. In fringilla quam lorem, eget congue dolor euismod at. Proin nunc lorem, rutrum eu rutrum ac, tristique convallis turpis. Fusce faucibus erat a mauris consequat, sed cursus velit aliquet. 
    </div>

    <div class="masonry-columns">
    <h2>2nd Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla 
    </div>

    <div class="masonry-columns">
    <h2>3rd Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla. lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut
    </div>

    <div class="masonry-columns">
    <h2>4th Masonry</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget fringilla ante. Phasellus tincidunt erat eu sodales semper. Donec sed lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla. lorem ut dui lobortis feugiat non at metus. Sed volutpat tortor vitae purus cursus, ut vehicula orci hendrerit. In ac metus ut massa fringilla porttitor. Aenean vitae sapien rutrum, rutrum enim varius, elementum magna.
    </div>

</div>

CSS

html, body{height:100%}


.masonry{
    clear: both;
    margin: 0px auto;
    padding: 20px 20px 0px;
    position: relative;
    width: 900px;
    z-index: 9;
    background-color:salmon;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-box-sizing:border-box;
    height:100%;
}

.masonry-columns{
    display: inline-block;
    list-style: none outside none;
    margin-bottom: 20px;
    padding: 20px;
    width: 100%;
    -moz-box-sizing:border-box;
    background-color:teal;
    float:left;
    direction:ltr
}