JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<span>AAA</span>
<span>BBBBB</span>
<span>CCCC</span>
</div>
CSS
div
{
position:relative;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
font-size:5em;
margin:5px;
&.wrapped span:nth-of-type(2)
{
order:3;
}
}
JavaScript
function is_wrapped(flex_div_path){
let flex_div = document.querySelector(flex_div_path);
let childrens = [...flex_div.children];
let y_flex_div= flex_div.getBoundingClientRect().y;
for(let i =0 ; i<childrens.length ; i++ ){
if(childrens[i].getBoundingClientRect().y != y_flex_div){
flex_div.classList.toggle("wrapped");
break;
}
}
}
is_wrapped("div");