title: Can 2 columns of nested divs be merged into a single column and then re-ordered using CSS?
body: <p>So, I'm pretty certain it's not possible to do the following, but thought I'd ask anyway!</p>
  <p>I've got 2 columns of content on my website design. Both have a wrapper div, floated, so they sit side by side. This looks fine on the desktop layout, and on the mobile (responsive) layout they currently both fill out to 100% width, and stack on top of each other.</p>
  <p>What I'd really like to do is change the order of the nested divs inside each floated wrapper on the mobile layout so that, essentially, the two columns merge into one single column and the nested divs ordering changes as below:</p>
  <pre><code>DESKTOP
  1 5
  2 6
  3 7
  4 8
  
  MOBILE
  1
  5
  2
  3
  6
  7
  8
  4
  </code></pre>
  <p>Hope this is clear enough! I know I can use flexboxes to change the order on the mobile layout, but as far as I can get is to change the order only within each individual wrapper div. Have also tried floating the nested divs in various ways on the desktop layout, but to no avail.</p>
  <p>EDIT:
  Apologies, I should have pasted my code, either:</p>
  <pre><code>&lt;div id=&quot;container&quot;&gt;
    &lt;div class=&quot;wrapper-left&quot;&gt;
      &lt;div class=&quot;divInside div1&quot;&gt;1&lt;/div&gt;
      &lt;div class=&quot;divInside div2&quot;&gt;2&lt;/div&gt;
      &lt;div class=&quot;divInside div3&quot;&gt;3&lt;/div&gt;
      &lt;div class=&quot;divInside div4&quot;&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;wrapper-right&quot;&gt;
      &lt;div class=&quot;divInside div5&quot;&gt;5&lt;/div&gt;
      &lt;div class=&quot;divInside div6&quot;&gt;6&lt;/div&gt;
      &lt;div class=&quot;divInside div7&quot;&gt;7&lt;/div&gt;
      &lt;div class=&quot;divInside div8&quot;&gt;8&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>or</p>
  <pre><code>&lt;div id=&quot;container&quot;&gt;
    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;divInside div1&quot;&gt;1&lt;/div&gt;
      &lt;div class=&quot;divInside div2&quot;&gt;2&lt;/div&gt;
      &lt;div class=&quot;divInside div3&quot;&gt;3&lt;/div&gt;
      &lt;div class=&quot;divInside div4&quot;&gt;4&lt;/div&gt;
      &lt;div class=&quot;divInside div5&quot;&gt;5&lt;/div&gt;
      &lt;div class=&quot;divInside div6&quot;&gt;6&lt;/div&gt;
      &lt;div class=&quot;divInside div7&quot;&gt;7&lt;/div&gt;
      &lt;div class=&quot;divInside div8&quot;&gt;8&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Also here's an image to illustrate what I'm after. Sincere apologies, it's my first question here!</p>
  <p><a href="https://i.stack.imgur.com/xFwd5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xFwd5.png" alt="Layout example" /></a></p>