I wonder how can I order my divs basing on mobile and desktop breakpoints. I have:
<div>
<span> foo </span>
<span> bar </span>
<span> baz </span>
</div>
I would like to reach a result in which:
only on mobile breakpoint firstspan & secondspan are on the same line, so:
foobar
baz
and only on desktop breakpoint secondspan & thirdspan are on the same line, so:
foo
barbaz
I usually use Tailwind (but I think this information is irrelevant), I tried with flex, break-line but nothing, I don't understand how to create this code.
To achieve this using tailwindCSS, you can use grid and make col-span responsive.
In below example, firstspan & secondspan are on first line until small breakpoint, and for screen bigger than small, firstspan is alone on its line and secondspan and thirdspan are on the same line.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="grid grid-cols-2">
<div class="sm:col-span-2">First span</div>
<div>Second span</div>
<div>Third span</div>
</div>Edited after comment from @davide
To have the elements on the same line, the easiest solution would be to repeat the secondspan twice, and use responsive breakpoints with display classes to hide or display it depending on the screen size.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div>
<span>First span</span>
<span class="sm:hidden">Second span</span>
</div>
<div>
<span class="hidden sm:inline">Second span</span>
<span>Third span</span>
</div>