title: Forcing flexbox element to float right
body: <p>I'm currently working on responsiveness on my website and I hit the wall. On smaller resolutions I changed the <code>flex-direction</code> to <code>column</code> from <code>row</code>, changed the ordering of flex elements, changed the main textbox <code>width</code> to <code>100%</code> and sideboxes to <code>50%</code>.</p>
  
  <p>Code looks like this:</p>
  
  <pre><code>&lt;section class="about" id="ABOUT"&gt;
      &lt;div class="about-sidebox l"&gt;
      &lt;/div&gt;
  
      &lt;div class="about-mainbox"&gt;
      &lt;/div&gt;
  
      &lt;div class="about-sidebox r"&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>As you can see the sideboxes are not within the container. Putting them in container helps but completely ruins my previous layout.</p>
  
  <p>CSS for wanted resolution is:</p>
  
  <pre><code>.about {
      flex-direction: column;
  }
  
  .about-mainbox {
      order: 1;
  }
  
  .about-sidebox {
      order: 2;
      width: 50%;
      flex-wrap: wrap;
  }
  </code></pre>
  
  <p>Effect is like this:
  <a href="https://i.stack.imgur.com/4GGyg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4GGyg.jpg" alt="enter image description here"></a></p>
  
  <p>As you can see I want the sideboxes to be next to each other. Any solution I can't think of without adding additional container?</p>