Responsive Two Column layout using Flexbox & Media Query

This was very fun and challenging to do. The only issue I got is the desktop layout was very much different than mobile one, means the content grouping was different. It was not like that we just type flex direction: row in desktop and our work is done. I had to use reverse direction in multiple cases. Even had to create some extra classes so as to group them according to the desktop layout. If it can be done more easily then please suggest. I am keen to learn if it can be done more efficiently. Any other suggestion are also welcome.