Добавление display: flex к элементу превращает его в гибкий контейнер. Это позволяет разместить любые дочерние элементы этого элемента в строки или в столбцы. Чтобы сделать это, нужно добавить свойство flex-direction к родительскому элементу и устанавить ему значение row (строка) или column (столбец). Значение row выравнивает дочерние элементы по горизонтали, а значение column выравнивает дочерние элементы по вертикали. Другие варианты значений свойства flex-direction - row-reverse (обращённая строка) и column-reverse (обращённый столбец). Примечание
Значением по умолчанию для свойства flex-direction является row.
Добавьте CSS свойство flex-direction элементу #box-container и присвойте ему значение row-reverse.