vertical align span on window resize go to another line - html

Question

JSFIDDLE is here.
I have spans inside div which will split into 3 vertically align row. It works normally in high resolution browser but when I resize browser it colaps. You can resize jsfiddle window and u'll see what am I saying.
How can I solve that?
<div class="postPrevContent cal">
<span>იანვარი</span>
<span>თებერვალი</span>
<span>მარტი</span>
<span>აპრილი</span>
<span>მაისი</span>
<span>ივნისი</span>
<span>ივლისი</span>
<span>აგვისტო</span>
<span>სექტემბერი</span>
<span>ოქტომბერი</span>
<span>ნოემბერი</span>
<span>დეკემბერი</span>
</div>

Answer 1

Add a
min-width:100px
in your .cal span css class

Answer 2

You could use media queries in your CSS, this will make it into 2 columns instead of 3 when the page is below a 500px wide:
#media (max-width: 500px){
.cal span {
width: 50%;
}
}
http://jsfiddle.net/hqu6t0en/1/
you can then so the same again for a wide of 250px and make width 100% to make one column when even smaller. Or apply a minimum width to .col to stop it getting below 250px but keep 2 columns
#media (max-width: 250px){
.cal span {
width: 100%;
}
}
Or
.cal {
margin: 10px 0;
min-width: 250px;
}

Answer 3

change span to div, style float left and width in percent (of corse in *.css and class is beather), set min-width of parent div. 150 if you think text is max 50px width.
<div style="min-width: 150px; max-width: 800px;">
<div style=" width: 33%;float: left;">AAAAAAAA</div>
<div style=" width: 33%;float: left;">BBBBBBBB</div>
<div style=" width: 33%;float: left;">CCCCCCCCC</div>
<div style=" width: 33%;float: left;">AAAAAAAAAA</div>
<div style=" width: 33%;float: left;">BBBBBBBBBBBBB</div>
<div style=" width: 33%;float: left;">CCCCCCCCCCCC</div>
</div>
PS. Set max-width for big display. Set centre text in div.