JSFiddle - React, Tailwind, and code Playground

HTML

<h1>natural ordering</h1>
<div class="container">
    <div class="header">Header</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

<h1>css re-ordering</h1>
<div class="container reorder" >
    <div class="header">Header</div>
    <div class="content">Content</div>
    <div class="footer">footer</div>
</div>

CSS

.container{
      display: table;
   }

 .reorder .content{
     display: table-header-group;
   }

.reorder    .header{
     display: table-row-group;
   }

.reorder  .footer{
     display: table-footer-group;
   }