响应式html：包装后在主列中的元素之间放置侧列

Question

我有简单的列布局：

在较小的屏幕上，我希望组件2是位于组件3之后的最后一个组件。

是否可以修改以下html以符合目标布局标准？

<div class="row">
  <div class="col-lg-8">
    <div id="component1"></div>
    <div id="component2"></div>
  </div>
  <div class="col-lg-4">
      <div id="component3"></div>
  </div>
</div>

Answer 1

您将能够使用flexbox order property来更改元素的顺序。使用Bootstrap 4时，您可以阅读Bootstraps documentation on order classes。

如Bootstrap示例所示，它可以像这样工作：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Bootstrap也具有响应性变化，也存在顺序变化。例如，类名看起来像这样：

.order-sm-0
.order-md-4
.order-lg-2