css - 通过Flex Box进行简单布局

我正在尝试使用引导程序4为我的网站创建一个通用的html结构，通用元素是：sidebar，h1和content。

主要任务是根据屏幕大小正确安排它们：


在移动视图中，它们应按以下顺序排列：h1，侧边栏和内容，如下所示：





在桌面视图中，它们应该像这样：




这是我的密码：https://codepen.io/anon/pen/ejLroV

最佳答案

如以上注释中前面所述，您可以使用-bootstrap order-classes https://getbootstrap.com/docs/4.1/layout/grid/#order-classes实现此目的，请查看下面的工作片段，希望对您有所帮助：）

aside {
  background: grey;
  height: 300px;
}

h1 {
  background: green;
}

section {
  background: #c1c1c1;
  height: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row d-lg-block">
    <h1 class="col-12 order-1 col-lg-9 float-lg-right order-lg-2">H1 Title</h1>
    <aside class="col-12 order-2 col-lg-3 float-lg-left order-lg-1">Sidebar</aside>
    <section class="col-12 order-3 col-lg-9 float-lg-right order-lg-3">Content</section>
  </div>
</div>