title: A two-column layout with different order of elements when transformed into one-column layout
body: <p>I'm trying two create a two-column layout that looks like this:</p>
  <p><a href="https://i.stack.imgur.com/CIQTU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CIQTU.png" alt="two column" /></a></p>
  <p>which on smaller screens would become a one-column layout looking like this:</p>
  <p><a href="https://i.stack.imgur.com/kkQHB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kkQHB.png" alt="enter image description here" /></a></p>
  <p><strong>What is tricky about it, is the order of elements - I want A and B to be first in respectively left and right column, while being the first and second elements in the single column layout.</strong></p>
  <p>I've managed to get a result like this with flex layout using the following code:</p>
  <pre><code>&lt;html&gt;
      &lt;style&gt;
          body {
              margin: 0;
              padding: 0;
          }
          .break {
              flex-basis: 100%;
              order: 0;
              height: 0;
              width: 0;
          }
          #wrapper {
              display: flex;
              flex-direction: column;
              flex-wrap: wrap;
              height: 100%;
          }
          .block-wrapper {
              width: 50%;
          }
          .block-wrapper h1, .block-wrapper p {
              padding: 10px;
          }
          #a {
              order: -1;
              background-color: magenta;
          }
          #b {
              order: 1;
              background-color: red;
          }
          #c {
              order: -1;
              background-color: yellow;
          }
          #d {
              order: 1;
              background-color: orange;
          }
          @media screen and (max-width: 600px) {
              .block-wrapper {
                  width: 100%;
              }
              #a, #b, #c, #d {
                  order: 0;
              }
              .break {
                  display: none;
              }
          }
      &lt;/style&gt;
      &lt;body&gt;
          &lt;div id=&quot;wrapper&quot;&gt;
              &lt;div id=&quot;a&quot; class=&quot;block-wrapper&quot;&gt;
                  &lt;h1&gt;A&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div id=&quot;b&quot; class=&quot;block-wrapper&quot;&gt;
                  &lt;h1&gt;B&lt;/h1&gt;
                  &lt;p&gt;lorem ipsum dolor&lt;/p&gt;
                  &lt;p&gt;amet&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;break&quot;&gt;&lt;/div&gt;
              &lt;div id=&quot;c&quot; class=&quot;block-wrapper&quot;&gt;
                  &lt;h1&gt;C&lt;/h1&gt;
                  &lt;p&gt;lorem &lt;/p&gt;
                  &lt;p&gt;ipsum&lt;/p&gt;
                  &lt;p&gt;dolor&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id=&quot;d&quot; class=&quot;block-wrapper&quot;&gt;
                  &lt;h1&gt;D&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>(for some reason it does not work when I put it as a code snippet, but it works just like on the screenshots when saved as HTML file and opened)</p>
  <p>The problem with this approach is that it requires <code>#wrapper</code> to have set height and breaks when an element cannot fit in the height (the element lands off-screen). Which does not work for my case, because the content of the items is going to be dynamic and can become quite long (the whole page containing this layout is supposed to have a vertical scrollbar).</p>
  <p>Would it be possible to get such a result with CSS only? What are your ideas?</p>