如何使用 bootstrap 或纯 css 制作响应断点内容

Question

我想用 bootstrap "row" 和 "col" class 制作响应式内容。但是我遇到了如何重建内容的问题。这就是我的意思：

我当前的 html 结构是这样的：

<div class="row">
    <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
        <section id="content1">
            Content 1
        </section>
    </div>

    <div class="col-lg-4 col-md-3 col-sm-4 col-xs-12">
        <section id="content2">
            Content 2
        </section>
    </div>

    <div class="col-lg-12 col-md-9 col-sm-8 col-xs-12">
        <section id="content3">
            Content 3
        </section>
    </div>
</div>

这段代码显示了上面内容的反转（低于 768px 时）。所以内容 3 是内容 2，反之亦然。

Answer 1

您希望将 order 应用于您的第二个和第三个元素。排序内置于 Bootstrap 4 中，因此您可以简单地使用 order- 前缀。因此，您只想将 order-2 应用于第二个 <div> 并将 order-1 应用于第三个

这可以在下面看到：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
    <section id="content1">
      Content 1
    </section>
  </div>

  <div class="col-lg-4 col-md-3 order-2 col-sm-4 col-xs-12">
    <section id="content2">
      Content 2
    </section>
  </div>

  <div class="col-lg-12 col-md-9 order-1 col-sm-8 col-xs-12">
    <section id="content3">
      Content 3
    </section>
  </div>
</div>

Answer 2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12">
      Div 1
    </div>
    <div class="col-md-12 col-sm-8 order-md-4 order-sm-1">
      Div 3
    </div>
    <div class="col-md-4 col-sm-4 order-sm-2">
      Div 2
    </div>
  </div>
</div>
</body>
</html>

使用一些排序实用程序更改特定弹性项目的视觉顺序。 Bootstrap 提供将项目放在首位或末尾的选项，以及使用 DOM 顺序的重置。

https://getbootstrap.com/docs/4.0/utilities/flex/ 检查这个link以供参考

如何使用 bootstrap 或纯 css 制作响应断点内容

How to make responsive break points content with bootstrap or pure css

html

css

frontend

responsive-design

bootstrap-4