I have an HTML code snippet that needs to be styled using Flexbox. Specifically, I want to re-order the elements and create a 'line break' before the last item. How can I utilize Flexbox so that most flex items are treated as atomic units, but one particular item—#c in this case—starts on the same line as the previous item and then wraps like a standard inline element?
section {
display: flex;
flex-wrap: wrap;
width: 450px;
background:orange;
padding:0.2em;
}
span {
background:yellow;
padding:2px 4px;
border-radius:3px;
border:1px solid rgba(0,0,0,50%);
margin:0 3px;
}
#a { order:1 }
#b { order:2 }
#c {
order:3;
background:none;
border:none;
}
section::before {
content:'';
order:4;
width:100%;
}
#d { order:5 }<section>
<span id="c">with an earthquake, birds and snakes and aeroplanes, and Lenny Bruce is not afraid</span>
<span id="a">That's great</span>
<span id="b">it starts</span>
<span id="d">— R.E.M.</span>
</section>To clarify, in the above scenario, I aim to have "That's great it starts with an earthquake" all on one line with text wrapping, followed by "— R.E.M." on a separate line.