I'm a little confused about what order:0 does in the css code. How is it different from order:2

order:0 is the initial value. The items are laid out sorted by order and then by the source code. So, if they all have order:0 or omit order, then they are in source order. But if you want something to be first: order:-1 or last order:1 or whatever, you can do that.

Use this sparingly, and it can affect accessibility.

Is there a shorthand for when you want to copy all of the CSS except for switching between flex:row and flex:column between different layouts?

You don't copy the CSS. CSS rules accumulate, so you just have to override the ones that you want to change. In other words, you only have to specify the changes to a new layout.

I'd like to know when to apply certain rules like what is considered wide enough screen to switch to horizontal layout from vertical etc

Great question. The MDN talks about choosing breakpoints, that is: widths where you decide to lay things out differently. Historically, you would design for different device sizes, but nowadays there are too many, so it's more a matter of aesthetics.

What is the difference between @media screen versus @media all?

@media print. See media types. There are also assistive technologies for the blind that aren't screens.

I'm curious why did you choose layout for a narrow device as the default in this case?

Great question. As a general philosophy, the default should be something that is at least adequate for everyone. Then we override it to make it better. Mobile first might not make good-enough use of a wider device, but it should still be useable and not require horizontal scrolling. So it makes a good default.

Imagine some really old browser that doesn't understand media queries: what version do you want it to use?

But, yeah, I can see your point.

The reading was pretty straightforward! / The reading was clear, so there's nothing I'd like to talk about. / the readings are making sense

Glad to hear it!