Mobile-first solution using CSS Flexbox(transform & position used too)

While using flexbox, reduction in screen size causes the elements in the first row to be reduced from 3 to 2 but having 3 elements in the first row is an absolute necessity for this layout, so I had to give a huge min-width(in 1100's) in the media query so that it changes to mobile view straightaway while having 3 elements in the top row. I wanted to know is this optimal? Also please feel free to give me tips on improving my coding practices as I'm new to the field and this is my first challenge.