How to move in code blocks using React and Tailwind

When working on the Next.js website, I need to move the React component to another position in the markup based on the screen size.

Especially on the left side of the screen of the large monitor, but before the content of the small monitor, I have a sidebar component.

Due to the way I organize the HTML markup and CSS, it is not clear to me how to perform this transition without rewriting a large part of it.

Therefore, I watched Tailwind provide me with a good solution.

This is like this: I added the component twice on the screen and assigned the classhidden xl:blockGo to the "Big Screen" section, thenxl:hiddenSummary to smaller screen:

<div className="hidden xl:block">
  <Sidebar />
</div>

…


<div className=“xl:hidden”>
<Sidebar />
</div>

Of course, the disadvantage is that the component is rendered twice, but since this is a simple presentation component with no logic, I can compromise.

Download mine for freeResponse Handbook


More response tutorials:


Online technical encyclopedia!