Developing a responsive website with only one breakpoint can be challenging, especially when restructuring the DOM to accommodate different screen sizes. It's important to consider not just CSS and media queries, but also how the elements are arranged within the HTML.
For example, on wide screens, the layout may look like this:
=================
HEADER
=================
HERO
=================
NAV | SEARCH
-----------------
While on narrow screens, it may look like this:
=================
HEADER
=================
NAV | SEARCH
-----------------
HERO
=================
In situations where the code for both versions is almost identical, duplicating the code and using jQuery to rearrange elements based on viewport size can be cumbersome and impact performance negatively.
One approach could be to structure the HTML in a more flexible way:
<header>...</header>
<section class="hero">...</section>
<section class="controls">
<nav>...</nav>
<form class="search">...</form>
</section>
Instead of using jQuery to move elements around after the page loads, consider utilizing CSS features such as flexbox or display:table to achieve the desired layout changes responsively without cluttering up your files.
Please note that while some solutions might seem duplicated, choosing the most appropriate tool for the task can lead to better overall results. For instance, the flexbox solution may be more powerful and efficient in this scenario compared to other methods like display:table.