Break element on overflow from _left_ side

Question

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.

Edit: there are no breakpoints / media queries. I'm looking for a solution that does not rely on different CSS at different breakpoints.

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: https://jsfiddle.net/me5sbzqy/1/

When you toggle in the small screen, also add `order: 1` to the first list item. — Michael Benjamin, Dec 11 '17 at 18:34
ah - to clarify, there are no breakpoints here. In the fiddle, the toggle is there just to quickly test ideas — wes, Dec 12 '17 at 05:45
You can write media query based on small resolution and apply different css to your first item. — sandyJoshi, Dec 12 '17 at 06:04
@Michael_B - I'm still not following. Adding `order:1` will change the order when all items are displayed. How would this work on both large and small screens ? — wes, Dec 13 '17 at 18:32
You would need a media query for this to work. The container has no concept of when it's children wrap. https://stackoverflow.com/a/37413580/3597276 — Michael Benjamin, Dec 13 '17 at 19:03

Break element on overflow from _left_ side

0 Answers0