Szia!
Mind a három dobozod a html tag-en kívül van. Ezeket be kell tenni a body-n belülre, valamint az összeset egy + div konténerbe .wrapper. Ebben kell beállítani a .flex-wrap: wrap; értéket , nem a .box-wrapper classon. A .box-wrapper szélessége nem lehet 95%, mert ekkor nem kerülnek egymás mellé az elemek, kb: 30% ekkor 3 elem kerül egymás mellé.
A @media querie-nél a .wrapper class-ban a flex-direction: column;, a .box-wrapper class-ban a flex-direction: row;, és a width: 90%; értékeket kell beállítani.
Itt van a működő oldal link:
https://codepen.io/sjfarkas/pen/qBVWVBJ?editors=1100
Biztosan lehetne még rövidíteni a kódot :) , de már így is működik.