JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrap">
  
  <section class="main-content reorderable order-3" role="main">
    Main content: first in source order

  </section>
  
  <nav class="main-nav reorderable order-2" role="navigation">
    Links
  </nav>
  
  <aside class="main-sidebar reorderable order-1" role="complementary">
    Sidebar
  </aside>
    
</div>

CSS

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

.main-content,
.main-nav,
.main-sidebar {
    border : 1px solid red;
  width: 33%;               /* For old syntax, otherwise collapses. */
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.order-1{
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;
}
.order-2{
  -webkit-box-ordinal-group: 2;  
  -moz-box-ordinal-group: 2;     
  -ms-flex-order: 2;     
  -webkit-order: 2;  
  order: 2;
}
.order-3{
  -webkit-box-ordinal-group: 3;  
  -moz-box-ordinal-group: 3;     
  -ms-flex-order: 3;     
  -webkit-order: 3;  
  order: 3;
}

JavaScript

$(function(){
    $('.reorderable').each(function(index){
        $that = $(this);
        $that.on('click', function(){
            $el = $(this);
            $('.reorderable').removeClass(function (index, css) {
                return (css.match (/\order-\S+/g) || []).join(' ');
            });
            $el.addClass('order-1');
        });
    });
});