拉拉维尔布局东方变化

Question

我知道CSS媒体查询，例如

@media screen and (orientation: portrait) {
div.container {
...
}
}
@media screen and (orientation: landscape) {
div.container {
...
}
}

但是，我希望充分利用引导程序来对屏幕方向变化做出反应。我也知道实际的刀片不是反应性的。 这 2 种布局将静态呈现为：

肖像

<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>

和景观

<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>

我不确定如何将这些 html 和 css 结合起来。我不想重新加载页面。

Answer 1

使用flexbox将纯HTML和CSS作为最干净的方法：

<header>header</header>
<div class="dd-bodyframe">
<div class="dd-body">
main body content
</div>
<div class="dd-body-pre">
pre body content
</div>
<div class="dd-body-aft">
after main
</div>
</div>
<footer>footer</footer>

和 CSS

body,.dd-bodyframe {
display: flex;
flex-direction: column;
}
.dd-body-pre {
order: -1;
}
@media screen and (orientation: landscape) {
.dd-bodyframe {
flex-direction: row;
flex: 1;
}
.dd-body {
flex: 1;
}
.dd-body-pre, .dd-body-aft {
/* 12em is the width of the columns */
flex: 0 0 12em;
}
}