My understanding of CSS media queries includes:
@media screen and (orientation: portrait) {
div.container {
...
}
}
@media screen and (orientation: landscape) {
div.container {
...
}
}
Despite this knowledge, I am looking to leverage bootstrap fully for reacting to screen orientation changes. I am aware that the actual blade is not reactive, so the two layouts will be rendered statically as:
For Portrait:
<div class="container-fluid d-flex min-vh-100 flex-column">
<div class="row">
<div class="col">
<div id="dashboard"></div>
</div>
</div>
<div class="row flex-fill fill d-flex red">
<div class="col ">
Content Sed ut perspiciatis unde omnis iste natus error sit voluptatem..
</div>
</div>
</div>
And for Landscape:
<div class="container-fluid d-flex min-vh-100 flex-column">
<div class="row flex-fill fill d-flex">
<div class="col-1">
<div id="dashboard"></div>
</div>
<div class="col ">
Content Sed ut perspiciatis unde omnis iste natus error sit voluptatem..
</div>
</div>
</div>
I am uncertain about how to integrate these HTML and CSS components without having to reload the page.