title: Ordering DIVs using flex and css
body: <p>I have a simple 3-column structure which includes a <em>back</em> button, a <em>main</em> content page and a <em>forward</em> button:</p>
  <pre><code>&lt;div class=&quot;container h100&quot;&gt;
          &lt;div class=&quot;row align-items-center h100&quot;&gt;
              
              &lt;div class=&quot;col-sm-2 align-self-center order-1&quot; id=&quot;backbutton&quot;&gt;
                  &lt;button&gt;Back&lt;/button&gt;
              &lt;/div&gt;
          
              &lt;div class=&quot;col-md-8 align-self-center align-self-stretch&quot; id=&quot;main&quot;&gt;
                  &lt;p&gt;Main content&lt;/p&gt;
              &lt;/div&gt;
          
              &lt;div class=&quot;col-sm-2 align-self-center order-1&quot; id=&quot;backbutton&quot;&gt;
                  &lt;button&gt;Next&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/yiZCq.png" rel="nofollow noreferrer">current result on a large screen</a></p>
  <p>On a smaller screen (e.g. phone), I would like the main content button to go to the top, and the back and next button on one row below (with back on the left and next on the right).</p>
  <p><a href="https://i.stack.imgur.com/3osZf.png" rel="nofollow noreferrer">expected result on a smaller screen</a></p>
  <p>I've tried &quot;order-1&quot; and &quot;order-12&quot;, but no luck. Any suggestions?</p>