Views formatting: liquid number of columns? I have a Views page that creates a 3-column grid layout.  These look just fine on a desktop browser.

On a mobile browser, each column is too thin to usefully read the text that's displayed, and it looks pretty awful, even if I use media queries to scale the text down.  I'd like to go to a single-column layout on these sorts of screens.  Is there a good way to do this?  Ideally, a CSS-only approach would be best, since I've managed to get my layout fluid using only CSS thus far.
You'll need to move away from using a table layout to one that uses divs instead, e.g an 'unformatted list' views style.

It's quite easy by piling a set of floated divs into a container.

If the container width changes, the number of items per 'row' also change.

e.g, something like this for the view items.

.views-row{
  float:left;
  margin:8px;
}