Break element on overflow from _left_ side


I have an unordered list of 3 items. They’re displayed in a row when space permits; however, on smaller viewports, I’m wondering if it is possible that the first element in the list breaks to the next line, instead of the last element. The markup here is flexible, and in both scenarios, elements are left-aligned.

Larger screens:

| item1 | item2 | item3 --------------- |

Smaller screens:

| item2 | item3 --- | (item 1 breaks down and is hidden)

What I’ve tried:

  • items: float:right; and display:inline-block; (breaks correctly, but doesn’t respect left alignment)
  • direction:rtl; and reversed order of items in markup (same issue as above)
  • variations on flex-direction and align-items on the items parent

In all instances I can get kinda close to what I need, but am still missing a core criteria. Is this even possible?

A fiddle is here: