One option is to duplicate your HTML. This ends up getting kind of tricky, but developers sometimes do it where they will say, okay, for mobile devices, I want to put this meta information right up here. But then once we get to a large device, we will hide it. And then elsewhere on the page, we'll basically reproduce that HTML and place it down here. And then we'll say the inverse, right? For mobile devices, it should not display, but for large devices, it should. So you're basically doubling the HTML just to get it to show up in two different locations based upon a breakpoint. It's kind of a nightmare to do that.

Instead, I'm going to tweak the ordering of every direct child. And if we take a look at the children, you'll see here we have a Skill button that we're hiding for mobile. But then we have the CircleChart. We have the Heading. We have a Description. We have MetaInformation. And then at the very bottom, right here, we have the Button, which is just below here. Okay, so let's just try something here. We're going to take this Laravel Skill Heading, and I'm going to use this new order property.

Okay, so let's just try something here. We're going to take this Laravel skill heading, and I'm going to use this new order property. Now if I were to set something like 3, well, what happens? It goes to the very bottom. And I notice whatever I set it to, again, it jumps to the very bottom, to 1. What's going on here? All right, well, the issue is the default ordering for any element. So the base value is going to be 0. So that means if I set it to 1, well, that's greater than the default order for every single item.

So that means if I set it to one, well, that's greater than the default order for every single item. It's not the way you would think, where the default order would be where it naturally occurs in the HTML. That's not how it works. The default will be zero. So you have a couple choices. If I just wanted to take this Laravel skill heading and move it to the very top, I could just set the order to something less than zero, like negative one, and instantly it jumps to the top here.

just set the order to something less than zero, like -1, and instantly it jumps to the top here. So think about the power of this. When in situations where the natural order in the HTML is actually not how you want it to appear for certain breakpoints, this can be massively beneficial. So we could stick with the -1 approach, but if we switch back to Zeppelin, we can see a couple other things, like this little meta information. That should be right below the little message here. We might tinker around here and say order 1. Once again, that’s going to push it to the very bottom after everything.

three. The description will have an order of four. And finally, the button here will have an order of five. So now, everything lines up perfectly. And of course, we'll still probably need to make a few tweaks here. For example, for desktop, this meta information is white, but for mobile, it's kind of a 50% opacity, something like that. We could select all of that, maybe right here, and set a text. I have a class here called Transparent50, which is incredibly useful, actually, to have various transparent utility classes.

I have a class here called Transparent50, which is incredibly useful, actually, to have various transparent utility classes. So if you ever want to say, set this to 10% of the background color, or 50% of the background color, you can see right here, that's exactly what I'm doing. That kind of stuff can be incredibly useful. But yeah, I could even say, for mobile devices only, set that. Anyhow, that's beside the point. But yeah, hopefully, you can see the huge benefit to this approach, especially when tweaking things for mobile. Now, to the best of my understanding, I don't think Tailwind offers any utility classes.

And then other times, I'm just constantly undoing everything I did for mobile. So in those cases, I'll use a max-width to target it directly. Anyways, here we're going to apply flex, and then flex-col. And then we could either give a class name for each one, or do something like nth-childs. So yeah, if I were to come back, here's that primary container, and maybe here, we'll say series-banner-chart. And let's collapse that. Here we have the series-banner-heading, series-banner-description, series-banner-meta, and then finally, the series-banner-button. Okay, so now here, we could be a little more specific.

then finally, the series banner button. Okay, so now here, we could be a little more specific. Series banner heading, we'll have an order of one. And then let's see, we're going to have a total of four, where the chart is order two, the meta is three, the description is four, and then we have one more. The button is five, only for a mobile screen. But yeah, not the prettiest way to do it, it would be nice if we could do it in Tailwind. And you know what, even though it's not provided out of the box, we could add support for that ourselves, including all of the responsive helpers. Fairly easy.