title: How to reorder divs using flex box?
body: <p>I am trying to keep a seo friendly and semantic structure for my DOM, without repeating whole elements to display them in various positions.</p>
  
  <p>My layout is based on <code>display: flex</code> items. I try to achieve the following:</p>
  
  <p><a href="https://i.stack.imgur.com/aWxVS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aWxVS.jpg" alt="Preview of mobile and desktop layout"></a></p>
  
  <p>Important things to know:</p>
  
  <ul>
  <li>I do not want to show/hide divs based on the window width (to avoid unnecessary duplicates)</li>
  <li>None of the divs has a known or fixed height</li>
  <li><strong>On desktops</strong> the divs should be vertical centered, while the right column builds a tag-team (behaves like one single div)</li>
  <li>The layout needs to support at least IE11+</li>
  </ul>
  
  <p>Is there a css only solution to achieve this?</p>
  
  <p>If not, it would be easy to cut out the green div and paste its content into the pink one using javascript. But I do have concerns about the performance and "flickering" using this, although resizing the browser makes it more complicated. Do I make this needlessly complicated?</p>
  
  <p>Here is fiddle showing a <strong>working solution but with javascript</strong>:</p>
  
  <p><a href="https://codepen.io/marianrick/pen/wqxVOg?editors=1010" rel="nofollow noreferrer"><strong>CODEPEN DEMO</strong></a></p>