title: Change layout of elements using CSS without changing HTML
body: <p>I have HTML markup that consists of three divs:</p>
  
  <pre><code>&lt;div class="gallery"&gt;Gallery&lt;/div&gt;
  &lt;div class="content"&gt;Content&lt;/div&gt;
  &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
  </code></pre>
  
  <p>I want to present it in two different layouts using CSS (would be nicer if I could control whether the sidebar appears on left or right):</p>
  
  <pre class="lang-none prettyprint-override"><code>+------------------+
  | Gallery          |
  +------+-----------+
  | Side | Content   |
  |      |           |
  +------+-----------+
  
  +------+-----------+
  | Side | Gallery   |
  +      +-----------+
  |      | Content   |
  |      |           |
  +------+-----------+
  </code></pre>
  
  <p>In fact, it would be nicer if I could control whether the sidebar appears on left or right.</p>
  
  <p>I can add additional divs and/or change the source order of divs <strong>as long as content appears before sidebar</strong>. But the HTML cannot be changed on per-layout basis.</p>
  
  <p>Here is my incomplete attempt to solve the problem using flexbox + order property.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* for demonstration */
  .gallery { height: 100px; background-color: #CCC;  }
  .content { height: 200px; background-color: #EEE; }
  .sidebar { height: 150px; background-color: #AAA; }
  /* common */
  .middle { display: flex; flex-direction: row; flex-wrap: wrap; }
  /* layout-1 */
  .middle.layout-1 .gallery { order: 1; width: 100%; }
  .middle.layout-1 .content { order: 3; width:  75%; }
  .middle.layout-1 .sidebar { order: 2; width:  25%; }
  /* layout-2 */
  .middle.layout-2 .gallery { order: 2; width: 75%; }
  .middle.layout-2 .content { order: 3; width: 75%; }
  .middle.layout-2 .sidebar { order: 1; width: 25%; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="middle layout-1"&gt;
    &lt;div class="gallery"&gt;Gallery&lt;/div&gt;
    &lt;div class="content"&gt;Content (this layout works perfectly)&lt;/div&gt;
    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  &lt;div class="middle layout-2"&gt;
    &lt;div class="gallery"&gt;Gallery&lt;/div&gt;
    &lt;div class="content"&gt;Content (should go below gallery)&lt;/div&gt;
    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>