How do I control the order in which flexbox items grow/shrink?

I have a flex container with three children. Each child has a min and max width and I would like to have them grow/shrink in a specific order. So, as the window width decreases, Item1 should shrink to its min width, and then Item2 should decrease to its min width, followed by Item3. Can someone help me figure out what I'm doing wrong? I've tried to discern from the documentation how to get the order set up, but I'm just not understanding.

<div className="MainContainer"><div className="Item1">    I should shrink first/expand last!</div><div className="Item2">    I should shrink & expand second!</div><div className="Item3">    I should shrink last/expand first!</div></div>

And my CSS:

.MainContainer {  display: flex;  flex-direction: row;  justify-content: center;  padding-left: 15px;  padding-right: 15px;}//Should shrink first/expand last.Item1{  min-width: 350px;  max-width: 816px;  flex: 1;  flex-grow: 0;}//Should shrink/expand second.Item2{  max-width: 816px;  flex: 1;  flex-grow: 1;}//Should shrink last/expand first.Item3{  min-width: 300px;  max-width: 224px;  flex: 1;  flex-grow: 2;}