title: How to change the order of elements without changing the html code?
body: <p>These are 3 <code>inline-block</code> and elements which means that they will be ordered next to each other.</p>
  
  <p>Here is a fiddle to view everything live: <a href="https://jsfiddle.net/8mdm8eox/" rel="noreferrer">https://jsfiddle.net/8mdm8eox/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    background: #fff;
    width: 100%
  }
  
  .firstElement,
  .secondElement,
  .thirdElement {
    display: inline-block;
    width: calc(100%/3)
  }
  
  .firstElement {
    background: #000;
    color: #fff
  }
  
  .secondElement {
    background: grey
  }
  
  .thirdElement {
    background: #ddd
  }
  
  @media (max-width: 767px) {}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="firstElement"&gt;First Element&lt;/div&gt;
    &lt;div class="secondElement"&gt;Second Element&lt;/div&gt;
    &lt;div class="thirdElement"&gt;Third Element&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So here is what I want , I want when the screen width is 767px or less:</p>
  
  <pre><code>@media (max-width: 767px){}
  </code></pre>
  
  <p>The first two elements are ordered vertically and the third one is ordered horizontally with the two other elements, So that they become like:</p>
  
  <pre><code>   _______________    ________________
     |First Element|    |ٍ              |
     _______________    |              |  
                        |Third Element |
     ________________   |              |
     |Second Element|   |              |
     _________________  _______________
  </code></pre>
  
  <p>Don't worry about the third element , The text will be broken , I just want the first two elements to look like that without changing the html.</p>