Firstly, realize that “landscape mode” and “portrait mode” are somewhat arbitrary terms. If I’m understanding correctly, you want the columns to switch from inline (side-by-side) to stacked whenever the viewport becomes wider than it is tall, but this isn’t how Bootstrap responsiveness works.
Bootstrap uses pre-defined breakpoints based on the viewport width in pixels…
XS < 576px
SM > 576px
MD > 768px
LG > 992px
XL > 1200px
XXL > 1400px
You must choose at which breakpoint you want your layout to change from horizontal to vertical. You don’t necessarily have to use the predefined Bootstrap pixel widths - you could change them to whatever you want with SASS, but you DO have to choose a number, at least for the purposes of this example.
It might be possible to use Javascript to dynamically query the size of the viewport and switch the layout “on the fly” but it would be a totally different approach that’s beyond my pay grade, and the scope of this example.
So, moving on… to do what you want to do, here’s the basic concept…
First you need set the height of both the HTML and Body of your website to 100%. Select the HTML in the Overview panel, go to the Attributes panel and enter h-100 in the Class Names field. Do the same for the Body.
Next, don’t bother with columns for this. Just drag two divs into your Body, and to make everything easier to see, give them different background colors (ex bg-primary on the first div, and bg-info on the second div.)
Now, add the following CSS to your project…
.perfect-col {
overflow: auto;
padding: 1rem;
height: 50%;
width: 100%;
}
@media (min-width: 992px) {
.perfect-col {
height: 100%;
width: 50%;
}
}
(You can change the name of the class from .perfect-col to whatever you want. That’s just what I picked for this example.)
Go the Attributes panel and in the Class Names field, add the perfect-col class to both of your divs.
Last, go to the Overview panel and select the Body. Then go to the Options > Flexbox settings and change the Flex Container to Flex at the XS size, and change the Direction to Column at the XS size, and Row at the LG size.
Now you should be able to add whatever contents you want to your divs, and they will always take up half of height and all of the width below 992 pixels, and all of the height and half of the width from 992 pixels and up. If you want to change the breakpoint to MD instead of LG, you’ll have to change the CSS media query from 992 to 768, and the flex direction on the Body from LG to MD.
NOTE: if you put more content in the div than can be displayed by the viewport, a scrollbar will appear. If you don’t want to see the excess content, you would change the rule overflow: auto; to overflow: hidden;
This should be enough to get you started.
