The idea
A tall element that does not fit in the remaining column space gets *fragmented* — split across two columns. break-inside: avoid tells the browser to keep the element whole, so it moves to the next column instead of splitting. Keep box B in one piece.
This level needs break-inside; break-before and break-after are off-limits so you cannot fake it by forcing a column break instead.