title: Dynamically change CSS flex order via JavaScript based on user event order
body: <p>I have an application that has a <code>&lt;nav&gt;</code> selection list of items that will dynamically open in an <code>&lt;article&gt;</code> area.  Each item is defined as a <code>&lt;div&gt;</code> in the <code>&lt;article&gt;</code> area with <code>display:none</code>, until each is activated by a JavaScript function as the user clicks selections in the <code>&lt;nav&gt;</code>.  As they appear in the <code>&lt;article&gt;</code> area, they show up in the sequence they are defined in the <code>&lt;article&gt;</code>.  The salient and somewhat pseudo parts of the code are shown below.</p>
  
  <p>I would like each div to show up in the sequence that the user clicks, and not in the sequence the divs are laid out.  So if the user selects <code>item002</code> then <code>item001</code>, the respective divs would show in the sequence <code>item002, item001</code>.</p>
  
  <p>I've been trying to find a way to do this with flex column layout by dynamically changing the order of the article divs, something like:</p>
  
  <pre><code>document.getElementById(shID).order = myOrdervar;
  </code></pre>
  
  <p>So far nothing I've tried has worked, and I can't find documentation on flex telling me if this is even possible.  Does anyone have a technique for changing the display sequence of the article divs, with or without flex?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;style&gt;
          body {
              font: 1em Helvetica;
              background: #999999;
          }
          #main {
              min-height: 500px;
              margin: 0;
              padding: 0;
              display: flex;
              flex-flow: column;
          }
          #main &gt; article {
              margin: 4px;
              padding: 5px;
              border: 1px solid #cccc33;
              border-radius: 7pt;
              background: #dddd88;
              height: 600px;
              flex: 3 1 60%;
              order: 2;
              flex-flow: column;
          }
          #main &gt; nav {
              margin: 4px;
              padding: 5px;
              border: 1px solid #8888bb;
              border-radius: 7pt;
              background: #ccccff;
              height: 600px;
              flex: 1 6 20%;
              order: 1;
              overflow: auto;
          }
          header, footer {
              display: block;
              margin: 4px;
              padding: 5px;
              min-height: 100px;
              border: 1px solid #eebb55;
              border-radius: 7pt;
              background: #ffeebb;
              display: -webkit-flex;
              display: flex;
              -webkit-align-items: center;
              align-items: center;
              -webkit-justify-content: center;
              justify-content: center;
          }
          /* Too narrow to support three columns */
          @media all and (max-width: 640px) {
              #main, #page {
                  flex-direction: column;
              }
              #main &gt; article, #main &gt; nav, #main &gt; aside {
                  /* Return them to document order */
                  order: 0;
                  flex-direction: column;
              }
              #main &gt; nav, #main &gt; aside, header, footer {
                  min-height: 50px;
                  max-height: 50px;
              }
          }
      &lt;/style&gt;
      &lt;script language="javascript" type="text/javascript"&gt;
          var globalOrder = 1;
          function showHide(shID) {
              if (document.getElementById(shID)) {
                  if (document.getElementById(shID + '-show').style.display != 'none') {
                      document.getElementById(shID + '-show').style.display = 'none';
                      document.getElementById(shID).style.display = 'flex';
                      document.getElementById(shID).style.order = globalOrder;
                      globalOrder++;
                  }
                  else {
                      document.getElementById(shID + '-show').style.display = 'inline';
                      document.getElementById(shID).style.display = 'none';
                  }
              }
          }
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          /* This CSS is used for the Show/Hide functionality. */
          .more {
              display: none;
              border-top: 0px solid #666;
              border-bottom: 0px solid #666;
          }
          .showSquid {
              display: block;
              border-top: 0px solid #666;
              border-bottom: 0px solid #666;
          }
          a.showLink, a.hideLink {
              text-decoration: none;
              font-size: 1.0em;
              font-family: 'MergeLight', Arial, Verdana, Helvetica, sans-serif;
              font-weight: bold;
              padding-left: 0px;
              border-top: 0px solid #666;
              border-bottom: 0px dotted #36f;
          }
          a.hideLink {
              background: transparent url(up.gif) no-repeat left;
          }
          a.showLink:hover, a.hideLink:hover {
              color: white;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          Sources
      &lt;/header&gt;
      &lt;div id='main'&gt;
          &lt;nav&gt;
              &lt;a href='#' id='Wilmington Wind-show' class='showLink' onclick='showHide("Wilmington Wind");return false;'&gt;
                  Wilmington Wind
              &lt;/a&gt;&lt;br&gt;
              &lt;a href='#' id='ArtMachine.mp3-show' class='showLink' onclick='showHide("ArtMachine.mp3");return false;'&gt;
                  Art Machine
              &lt;/a&gt;&lt;br&gt;
              &lt;a href='#' id='Breathing-original.mp3-show' class='showLink' onclick='showHide("Breathing-original.mp3");return false;'&gt;
                  Breathing
              &lt;/a&gt;&lt;br&gt;
              &lt;a href='#' id='ToroidMachine-show' class='showLink' onclick='showHide("ToroidMachine");return false;'&gt;
              &lt;/a&gt;
          &lt;/nav&gt;
          &lt;article&gt;
              &lt;div id='Wilmington Wind' class='more' style="flex-direction: column;"&gt;
                  Wilmington Wind&lt;br&gt;
              &lt;/div&gt;
              &lt;div id='ArtMachine.mp3' class='more' style="flex-direction: column;"&gt;
                  Art Machine&lt;br&gt;
              &lt;/div&gt;
              &lt;div id='Breathing-original.mp3' class='more' style="flex-direction: column;"&gt;
                  Breathing
              &lt;/div&gt; &lt;!-- Breathing-original.mp3 --&gt;
          &lt;/article&gt;
          &lt;footer&gt;&amp;copy; 2017&lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>