My goal is to utilize flexbox in conjunction with bootstrap 4 to produce a design featuring 3 vertically stacked columns on the left, accompanied by a single column on the right that matches the height of the left columns. Following that, there will be some full-span rows in the layout.
My aim is to achieve this using the native classes provided in bootstrap 4, as opposed to the approach discussed in this thread.
The desired layout can be visualized in the following image: https://i.sstatic.net/KVugq.jpg
I have started to work on this layout, with the initial progress available here: http://jsfiddle.net/bigalnz/9xLgvnc5/14/
<div class="container">
<div class="flex-column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
A starting point can be found on this jsfiddle: here.
However, I have some uncertainties regarding the layout. Which element should determine the width? Should the large box have its own container? Should the full span rows be enclosed in their container? Also, why is using flex superior to employing nested rows/columns like in this example (which is not entirely correct as the large right box does not have full height)?