fo-columns

by moob

HTML

<div id="divs">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS

/* 
The :hover state must be a fixed pixel height bigger so we can offset the adjacent divs to make them line up. (See the lime divs when you hover on a red one.)
Comment-out the media query to see how it will look for browsers which don't support the General Sibling Selector '~'. 
Resize for mobile.
*/

#divs {
    background:#eee;
    max-width:420px;
    min-width:210px;
    margin:auto;
    padding:0 0 10px 10px
}
#divs:after {
    /* clear floats */
    content:"";
    display: table;
    clear: both;
}
#divs div {
    display:block;
    width:200px;
    height:100px;
    margin:10px 10px 0 0;
    min-width:200px;
    font-size:30px;
    /* transitions (imperfect) */
    -webkit-transition:all .25s;
    transition: all .25s;
}
#divs div:hover {
    height:200px;
}
/*
float alternately left and right
*/
#divs div:nth-child(odd) {
    background:red;
    float:left;
    clear:left;/* clear left so they dont wrap into column two */
}
#divs div:nth-child(even) {
    background:blue;
    float:right;
}
@media only screen and (max-width:440px) {
    #divs {
        width:210px;
    }
}
@media only screen and (min-width:440px) {
    /* negative offset for the right-hand divs when a left div is hovered */
    #divs div:nth-child(odd):hover + div ~ div:nth-child(even) {
        background:lime;
        margin-top:-90px; /* has to be an actual pixel value */
    }
}