通过 Flex Box 进行简单布局

Question

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

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

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

1. 在桌面视图中，它们应该是这样的：

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

Answer 1

如前面在上面的 cmets 中所说，您可以使用 - bootstrap order-classes https://getbootstrap.com/docs/4.1/layout/grid/#order-classes 来实现这一点，请看看下面的工作 sn-p，希望对您有所帮助:)

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>