For a couple of reasons, flexbox is much better than bootstrap:
Bootstrap uses floats to make the grid system, which many would say is not meant for the web, where flex-box does the opposite by staying flexible to the items' size and contents; same difference as using pixels vs em/rem, or like controlling your divs only using margins and padding and never setting a pre-defined size.
Bootstrap, because it uses floats, needs clearfix after each row, or you will get misaligned divs of different height. Flex-box doesn't do that and instead checks for the tallest div in the container and sticks to its height.
The only reason I would go with bootstrap over flex-box is lack of browser support (IE mainly) (die already). And sometimes you get different behavior from Chrome and Safari even though both use the same webkit engine.
Edit:
BTW if the only problem you are facing is the equal height columns, there are quite a few solutions for that:
You can use display: table on the parent, an display: table-cell; on the child. See How to get same height in display:table-cell
You can use absolute positioning on each div:
position: absolute;
top: 0;
bottom: 0;
- There is also the jquery/JS solution, and another solution I can't remember at the moment that I'll try to add later.
Edit 2:
Also check http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties on how flex-box works.
Edit 3:
https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
Edit 4:
https://caniuse.com/#feat=flexbox
