Optimizing flexbox CSS code for different widths - html

Question

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.
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.
WIDE Screen:
SMALL Screen:
.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 > * {
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 > * {
flex: 1;
}
}
<footer class="appFooter">
<ul class="navigation">
<li>Contact Us</li>
<li>Terms of Service</li>
<li>Privacy Policy</li>
</ul>
<div class="copyright">
<span>© 2018 Site</span>
</div>
</footer>

Answer 1

Yes, I would say there's room for simplification in your code (both the CSS and HTML).
This should be all you need:
.appFooter {
text-align: center;
}
.navigation {
display: flex;
flex-direction: column;
margin-bottom: 48px;
}
#media (min-width: 900px) {
.appFooter {
display: flex;
justify-content: space-between;
}
.navigation {
flex-direction: row;
order: 1;
margin: 0;
}
.navigation a + a {
margin-left: 20px;
}
}
<footer class="appFooter">
<nav class="navigation">
Contact Us
Terms of Service
Privacy Policy
</nav>
<div class="copyright">© 2018 Site</div>
</footer>
https://jsfiddle.net/1sw59n4v/

Answer 2

For your desktop view, you don't need to worry about all the order and text-align declarations, as you can achieve the same result with flex-direction: row-reverse. Keep in mind that you'll still want to allow the elements to span a single line, you'll additionally need to remove the flex on the children with flex: inherit.
Also keep in mind that with your example, you have things like display: flex in the media query. These don't need to be re-declared in the media query, as the rules are inherited :)
Here's an example using flex-direction: row-reverse that cuts out the re-declarations:
.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 > * {
flex: 1 100%;
}
#media only screen and (min-width: 900px) {
.appFooter {
flex-direction: row-reverse;
}
.appFooter > * {
flex: inherit;
}
.appFooter ul.navigation li {
display: inline;
margin-right: 20px;
}
.appFooter ul.navigation li:last-child {
margin-right: 0;
}
}
<footer class="appFooter">
<ul class="navigation">
<li>Contact Us</li>
<li>Terms of Service</li>
<li>Privacy Policy</li>
</ul>
<div class="copyright">
<span>© 2018 Site</span>
</div>
</footer>
This cuts out more than half of your media query declarations, giving the exact same result.
Hope this helps! :)

Answer 3

You can optimize/shorten that code quite a bit, and at the same time increase its render flexibility.
By simply remove all elements but the actual links a and the copyright span, you easily control both their stacking/render order and alignment.
Initially set:
flex-direction: column, vertical direction
margin: 48px 0 0 0, top margin for copyright
With the media query:
flex-direction: row, switch to horizontal direction
order: -1, position the copyright first in order, enable it to align left
margin: 0 auto 0 0, reset top and push the links to the right by make its right margin "auto"
Stack snippet
.appFooter {
display: flex;
flex-direction: column;
align-items: center;
}
.appFooter span {
margin: 48px 0 0 0;
}
#media only screen and (min-width: 900px) {
.appFooter {
flex-direction: row;
}
.appFooter span {
order: -1;
margin: 0 auto 0 0;
}
.appFooter a + a {
margin-left: 10px;
}
}
<footer class="appFooter">
Contact Us
Terms of Service
Privacy Policy
<span>© 2018 Site</span>
</footer>
If you still want to wrap the links, just add its selector to the .appFooter {...} rule.
Stack snippet
.appFooter, .appFooter nav {
display: flex;
flex-direction: column;
align-items: center;
}
.appFooter span {
margin: 48px 0 0 0;
}
#media only screen and (min-width: 900px) {
.appFooter, .appFooter nav {
flex-direction: row;
}
.appFooter span {
order: -1;
margin: 0 auto 0 0;
}
.appFooter a + a {
margin-left: 10px;
}
}
<footer class="appFooter">
<nav>
Contact Us
Terms of Service
Privacy Policy
</nav>
<span>© 2018 Site</span>
</footer>