If you use the markup .bfg.bfg--row.bfg--wrap then .bfg__box elements are placed in the row direction and wrapped onto multiple lines when needed.
But in this case the total height of all .bfg__box elements might be bigger than the .bfg block height itself!
If you know that there's exactly 2 lines of .bfg__box elements, you can constrain them to fit into the .bfg block, by using .bfg--2-lines modifier.
With this technique, all the rows will have the same height. If you need each row to have a different height, use chained or nested grids techniques.
The same pattern applies to the markup .bfg.bfg--col.bfg--wrap.