How to align right when flex-wrap is triggered but justify-content space-between otherwise?

Question

I have searched for the answer but I am not sure how to write my question in a concise matter to find answers. So far, I have found nothing.

Here is the situation:

On large screen, I would like this:

edge| [CONTENT A] ... space ... [CONTENT B] |edge

I have achieve this by using justify-content: space-between .

However when the window resize down, the content become:

edge| [CONTENT A] ... space ... |edge
edge| [CONTENT B] ... space ... |edge

( I am using flex-wrap: wrap )

But I would like

edge| ... space ... [CONTENT A] |edge
edge| ... space ... [CONTENT B] |edge

• I have tried with width: 100%; text-align: right width: 100%; text-align: right but then in large screen the content look centered since the content A is pushed to the right.
• I have tried margin-left: auto and it achieves the same visual effect: works in small screen but content A looks centered in large width.
• I have tried align-items: flex-end; align-content: flex-end align-items: flex-end; align-content: flex-end but it doesn't do anything.
• I have tried align-self: flex-end but it doesn't do anything either.

Any suggestions? Thank you.

Answer 1

row-reverse wrap-reverse can do it

 .box { display:flex; justify-content:space-between; flex-flow: row-reverse wrap-reverse; /* OR flex-direction: row-reverse; flex-wrap: wrap-reverse; */ /* to illustrate */ overflow:hidden; resize:horizontal; padding:10px; border:1px solid; /**/ }.box > div { padding:10px 30px; border:1px solid blue; }.box > div:first-child { order:1; /* to rectify the order swapped by row-reverse */ }

 <div class="box"> <div>some text A</div> <div>some text B</div> </div>