title: Reorder elements in different containers based on screen size
body: <p>I am looking for a cross-browser way to set different position and display order for elements based on screen size, while maintaining the initial DOM order. The elements are initially in separate containers and standard ways like <code>float</code>/<code>clear</code> in media queries would probably not suffice. </p>
  
  <p>Also, it would be nice if it was pure CSS solution.</p>
  
  <p>This fiddle uses javascript to manipulate the DOM on load and resize event, which is undesired.</p>
  
  <p><a href="https://jsfiddle.net/168y076w/" rel="nofollow noreferrer">https://jsfiddle.net/168y076w/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="header"&gt;HEADER&lt;/div&gt;
    &lt;div id="left_column"&gt;
      &lt;div id="left_box_1"&gt;LEFT BOX 1&lt;/div&gt;
      &lt;div id="left_box_2"&gt;LEFT BOX 2&lt;/div&gt;
    &lt;/div&gt;
      &lt;div id="main_content_holder_for_big_devices"&gt;&lt;/div&gt;
    &lt;div id="right_column"&gt;
      &lt;div id="right_box_1"&gt;RIGHT BOX 1&lt;/div&gt;
      &lt;div id="main_content_holder_for_small_devices"&gt;
        &lt;div id="mid_column"&gt;MID COLUMN&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="right_box_2"&gt;RIGHT BOX 2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#header {
    width: 100%;
    height: 80px;
    background: red;
  }
  #mid_column {
    background: aqua;
    height: 60px;
  }
  #left_box_1, #left_box_2 {
    background: blue;
    height: 40px;
  }
  #right_box_1 {
    background: yellow;
    height: 40px;
  }
  #right_box_2 {
    background: purple;
    height: 40px;
  }
  @media screen and (min-width: 600px) {
    body {
      width: 600px;
    }
    #left_column, #mid_column, #right_column {
      float: left;
    }
    #left_box_1, #left_box_2, #right_box_1, #right_box_2 {
      width: 150px;
    }
    #mid_column {
      width:300px;
      background: aqua;
    }
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>const SMALL_DEVICE_WIDTH = 600;
  
  var $holder_for_small = $( "#main_content_holder_for_small_devices" );
  var $holder_for_big = $( "#main_content_holder_for_big_devices" );
  
  window.addEventListener( "resize", move_content_in_dom );
  window.addEventListener( "load", move_content_in_dom );
  
  function move_content_in_dom() {
      var w = window.innerWidth;
      if( w &lt; SMALL_DEVICE_WIDTH ) {
      if( $holder_for_big.html() !== "" ) {
        $holder_for_small.html( $holder_for_big.html() );
        $holder_for_big.html( "" );
      }
    } else {
      if( $holder_for_small.html() !== "" ) {
        $holder_for_big.html( $holder_for_small.html() );
        $holder_for_small.html( "" );
      }
    }
  }
  </code></pre>
  
  <p>This image illustrates the layout I want to achieve. On small devices like phones, after header on top, I want to have the boxes from left column, after them <strong>I want one box from the right column, after that the main content, and after that another box from the right column</strong>.</p>
  
  <p><a href="https://i.stack.imgur.com/i7Wgz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i7Wgz.png" alt="Desired layout mockup"></a></p>
  
  <p>I am hoping for an answer that would give me the right tools so I don't have to reinvent the wheel.</p>