Is it possible to use media queries to turn display:table-cell into two lines? (While keeping vertical alignment)

Problem

I have this example: http://jsfiddle.net/35Js5/7/

I want to be able to have my nice row of images split onto two lines when the browser window is below a certain width. The top row (.companylist) is what I have currently and the bottom row (.companylist2) is what I have tried (the display:inline-block method, to no avail).

Basically I need to be able to keep the HTML structure if possible and keep the vertical alignment of the images (they scale down if the box is too small for them).

CSS:

.col {
    box-sizing:border-box;
    display:inline-block;
    float:left;
    padding:10px 10px;
}
.col1 {
    width:100%;
}
.col2 {
    width:50%;
}
.col4 {
    width:25%;
}
.col8 {
    width:12.5%;
}
.companylist {
    display:table;
    table-layout:fixed;
}
.companylist .col {
    display:table-cell;
    height:200px;
    vertical-align:middle;
    float:none;
}
.companylist .col img {
    max-height:100%;
    max-width:100%;
}

.companylist2 {
    display:inline-block;
}
.companylist2 .col {
    display:inline-block;
    height:200px;
    vertical-align:middle;
    float:none;
}
.companylist2 .col img {
    max-height:100%;
    max-width:100%;
}

@media screen and (max-width: 768px) {
    .mindmap .cell > p {
        font-size:1em;
    }
    .col8 {
        width:25%;
    }
    .col4 {
        width:50%;
    }
    .col2 {
        width:100%;
    }
}
Problem courtesy of: Jamie Barker

Solution

Much messing about later:...

The answer is yes, if you have a fixed height for each cell and if you're willing to get around the white-space issue with a hack:

@media screen and (max-width: 768px) {
    .col8 {
        width:25%;
    }
    .companylist .col {
        display:inline;
        margin:0 0 0 -3px;
        padding:0;
    }
    .companylist .col:first-child {
        margin:0;   
    }
    .companylist .col img {
        display:inline-block;
        max-height:200px; 
        max-width:25%;  
        vertical-align:middle;
    }
}

Basically set the original "cell" to be display:inline;, add negative left margin to counteract the white space (make sure the first one doesn't have it), make the contents of the cell display:inline-block;

Not perfect, but a lot better...

Solution courtesy of: Jamie Barker

Discussion

Elements with display: table-cell will act like cells within a single table-row unless you change your markup.

To get the behaviour you describe, you could add a span that snaps from "display: inline" to "display: table-row" at your breakpoint.

Discussion courtesy of: fontophilic

This recipe can be found in it's original form on Stack Over Flow.