title: Optimizing flexbox CSS code for different widths
body: <p>The code snippet below technically achieves the goal of having a footer that has layout for wide and small screens as seen in the images below.</p>
  
  <p>My question, am I using flex box correctly? Is there a more optimal way to achieve the desired result as seen in the images? I ask as my css feels verbose and I'd like to learn if there's a better way.</p>
  
  <p><strong>WIDE Screen:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/QymTV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QymTV.png" alt="WIDE"></a></p>
  
  <p><strong>SMALL Screen:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/0mCcv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0mCcv.png" alt="SMALL"></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>.appFooter {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    text-align: center;
  }
  .appFooter ul.navigation {
    margin: 0 0 48px 0;
    padding: 0;
    list-style: none;
  }
  .appFooter &gt; * {
    flex: 1 100%;
  }
  @media only screen and (min-width: 900px) {
    .appFooter {
      display: flex;
      flex-flow: row wrap;
    }
    .appFooter ul.navigation {
      margin: 0;
      order: 2;
      text-align: right;
    }
    .appFooter ul.navigation li {
      display: inline;
      margin-right: 20px;
    }
    .appFooter ul.navigation li:last-child {
      margin-right: 0;
    }
    .appFooter .copyright {
      order: 1;
      text-align: left;
    }
    .appFooter &gt; * {
      flex: 1;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;footer class="appFooter"&gt;
    &lt;ul class="navigation"&gt;
      &lt;li&gt;&lt;a href="/"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/"&gt;Terms of Service&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="copyright"&gt;
      &lt;span&gt;&amp;copy; 2018 Site&lt;/span&gt;
    &lt;/div&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>