title: Responsive design - Change layout with javascript and css (flex and media-queries)
body: <p>Please take a look at <a href="http://jsfiddle.net/mrcjcfe7/19/" rel="nofollow">http://jsfiddle.net/mrcjcfe7/19/</a> for a working layout.</p>
  
  <p>I have 3 columns (COL1, COL2 and COL3) I need to rearrange depending of screen width. The twist is I need to get COL3 under COL2 when the screen is between 300-600px. Under 300px, I need to show COL2, COL3 and COL1.</p>
  
  <p>When the screen is resized, the combination of CSS and Javascript makes the job.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var col1 = document.getElementById('col1'),
      col2 = document.getElementById('col2'),
      swapped = false;
  
  window.onresize = function () {
      var width = window.innerWidth;
      if (width &lt; 300 &amp;&amp; swapped === false) {
          swapCols();
          swapped = true;
      } else if (width &gt; 300 &amp;&amp; swapped === true) {
          swapCols();
          swapped = false;
      }
  };
  
  function swapCols() {
      var _col1 = col1.innerHTML,
          _col1id = col1.id,
          _col2 = col2.innerHTML,
          _col2id = col2.id;
      col1.innerHTML = _col2;
      col1.id = _col2id;
      col2.innerHTML = _col1;
      col2.id = _col1id;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html * {
      margin:0;
      padding:0;
  }
  body {
      background:#000;
      font-family:helvetica, verdana;
  }
  #wrapper {
      width:600px;
  }
  #col1 {
      float:left;
      width:200px;
      background:#cc4444;
  }
  #col2 {
      float:left;
      width:200px;
      background:#44cc44;
  }
  #col3 {
      float:left;
      width:200px;
      background:#4444cc;
  }
  .clear {
      clear:both;
  }
  @media only screen and (min-width:300px) and (max-width:600px) {
      #col3 {
          float:none;
      }
  }
  @media only screen and (max-width:300px) {
      #wrapper {
          width:100%;
      }
      #col1, #col2, #col3 {
          float:none;
          width:100%;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
      &lt;div id="col1" class="cols"&gt;COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 -&lt;/div&gt;
      &lt;div id="col2" class="cols"&gt;COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 -&lt;/div&gt;
      &lt;div id="col3" class="cols"&gt;COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 -&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem I have is when COL2 contains more stuff then COL1. COL3 takes the place I want but there is a gap filling the space beside COL2. Edit : Please take a look at the image at the end of this post.</p>
  
  <p>How can I achieve the desired layout without the gap when the screen is between 300-600px and the second column contains more stuff than the first one?</p>
  
  <p>Thank you,</p>
  
  <p>Sebastien</p>
  
  <p>EDIT
  <a href="http://i.stack.imgur.com/QJWym.png" rel="nofollow">Here is an image showing the correct layout and the problem I attempt to solve</a></p>