CSS flexible elements layout: fixed left position but sink down to avoid overlapping?

Question

I am trying to build a layout when I have a list of labels starting at some fixed percentage position, but I want them to push down on separate lines if page becomes narrow to avoid their overlap:

|        |<- 10%   |<-20%     |
label1   label2    label3

|    |    |    |
label1
     label2
          label3

So far I could not do that (tried floats, spacer divs, spans) and I begin to think that this may be impossible because of how the rendering flows.

Do you know if there is a solution, or what I could do otherwise? Here is my cleaned up jsfiddle template.

Answer 1

The only way that occurs to me is with a media query. You would have to hardcode the specific screen with at which you want the "jump" to happen. I'm afraid there is no way to do this in a smart and automated way with CSS only.

@media only screen and (max-width: 35em) {
    .d2 {margin-top: 1em;}
    .d3 {margin-top: 2em;}
}

You can see an example here http://jsfiddle.net/wPrq8/

Answer 2

To get close to that behavior with pure css would require them to be floated. However, if your intent is to get them to all move down at once, then I have not yet found a way to make that happen.