CSS3 columns ordered horizontally - css

Question

Morning,
Situation:
I am using CSS3 Columns to have responsive columns for ordering some pins.
The products in the columns will be ordered by rating (as you can see here: http://d.pr/i/iJPK ) horizontally. The first 3 get highlighted.
Problem:
CSS3 Columns order vertically by default, and i see no option to change this. The ordering needs to be horizontally, so i can highlight the first 3 + the other are horizontally arranged. The height needs to be variable too (thats why i used css3 columns)
What it looks like now in Chrome: http://d.pr/i/Vbqq
Fiddle of my situation:
http://jsfiddle.net/VXsAU/43/ these items are ordered VERTICALLY, i need them ordered HORIZONTALLY.
Possible workarounds with jquery are accepted.
This is my html:
<div id="list_all_burgers">
<div id="columns">
<div class="top_3_header"></div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="top_3_header"></div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi.
</p>
</div>
<div class="top_3_header"></div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Nullam eget lectus augue.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
</div>
</div>
</div>
And this is my css: (sass notation)
#list_all_burgers{
margin-top: 9px;
margin-left: 15%;
height: 500px;
//background-color: rgba(yellow, .3);
overflow: auto;
#columns{
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
.top_3_header{
display: inline-block;
background: url('../images/list/burger_name_pat.png') repeat-x;
width: 100%;
height: 36px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
.pin{
display: inline-block;
background-color: rgba(0,0,0, .05);
margin-top: -2px;
-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
-moz-box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
img{
width: 100%;
padding-bottom: 15px;
margin-bottom: 5px;
}
}
}
}

Answer 1

Found a solution (hurray)
Masonry JS library did the trick for me.
MasonryJS link

Answer 2

Column CSS is not appropriate for the result you wish.
You can look for display:inline-block and text-align:justify.
http://jsfiddle.net/VXsAU/43/
ul.newslist {
width:98%;
background-color: #ccc;
padding: 16px 1% 0;
list-style: none;
text-align:justify;
}
ul.newslist:after {/* to justify last line too, add a virtual-one */
content:'';
display:inline-block;
width:100%;
}
ul.newslist > li {
border-top: 1px solid #000;
display:inline-block;
width:21%;
}
ul.newslist > li > a {
display: block;
padding: 4px;
background-color: #f6b;
text-decoration: none;
color: inherit;
}
EDIT: with itel different height: http://jsfiddle.net/GCyrillus/VXsAU/44/