Reordering DOM Elements on Mobile with CSS order

TLDR

Reordering HTML elements on smaller viewports by physically altering the DOM tree risks breaking JavaScript traversal logic. Applying CSS order properties within a Flexbox container reorders elements visually on mobile viewports while preserving DOM hierarchy for desktop rendering and script listeners.

Layout Approach	DOM Tree Structure	Desktop/Mobile Flexibility	Script Traversal Impact
JS DOM Re-Ordering	Mutated per screen size	Complex (Requires reverse CSS)	Breaks positional DOM queries
CSS Flex order Property	Static & Unchanged	100% Responsive via Media Queries	Zero Script Disruption

---

Why physical DOM mutation breaks positional JavaScript listeners

On mobile screens, large table viewports pushed sheet navigation tabs below the fold, forcing users to scroll past dozens of rows to switch sheets.

Moving the navigation bar HTML element ahead of the table container in the DOM source would have resolved the mobile issue. However, doing so broke existing script routines that expected the header, table, and tab bar to follow a specific DOM traversal sequence.

---

Visual reordering via CSS flexbox media queries

Instead of altering the DOM structure, we applied CSS Flexbox order declarations within responsive media queries:

/ Maintain canonical DOM order for desktop; reorder visually for mobile /
@media (max-width: 767px) {
    .tafne-main-container {
        display: flex;
        flex-direction: column;
    }
    
    .tafne-center-header { order: 1; }
    .tafne-sheet-tab-bar { order: 2; } / Visually moves above table /
    .tafne-table-body    { order: 3; }
}

The underlying HTML structure remains intact:

<div class="tafne-main-container">
    <div class="tafne-center-header">...</div>
    <div class="tafne-table-body">...</div>      <!-- Second in DOM -->
    <div class="tafne-sheet-tab-bar">...</div>   <!-- Third in DOM -->
</div>

The tab bar renders between the header and table on mobile devices, while JavaScript functions traversing children[N] continue to execute without modification.

Rule of thumb: Use CSS Flexbox order for viewport-specific visual reordering to avoid mutating the underlying DOM tree.