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

Question

我正在尝试使用 bootstrap 4 为我的网站制作一个通用的 html 结构，通用元素是:sidebar、h1 和 content .

主要任务是根据屏幕尺寸正确排列它们:

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

1. 在桌面 View 中，它们应该是这样的:

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

Answer 1

如前文所述，您可以使用 - 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>