title: reorder div with css
body: <p>I have divs sorted 1, 2, 3 ... as html layout    </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="bigdiv"&gt;
      &lt;div class="div1"&gt;div 1&lt;/div&gt;
      &lt;div class="div2"&gt;div 2&lt;/div&gt;
      &lt;div class="div3"&gt;div 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.div1 {
      float: left; 
  }
  
  .div2 {
      float: left;     
   }
  
   .div3 {
      float: left;     
   }
  </code></pre>
  
  <p>How can I <strong>reorder divs</strong> to this <strong>layout with CSS</strong></p>
  
  <pre><code>&lt;div class="bigdiv"&gt;
      &lt;div class="div3"&gt;div 3&lt;/div&gt;
      &lt;br&gt;
      &lt;div class="div1"&gt;div 1&lt;/div&gt;
      &lt;div class="div2"&gt;div 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>by CSS (float, :after, :before)</p>
  
  <p>My try:</p>
  
  <pre><code>.div3 {
      float: right; 
  } 
  .div3:before {
      content: '\A\A';
      white-space: pre;
  }
  </code></pre>
  
  <p>Thank you in advance.</p>