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

Question

我想使用 Bootstrap “行”和“列”类制作响应式内容。但是我遇到了如何重建内容的问题。这就是我的意思:

我当前的 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>