如何在移动视图中按顺序重新排列 bootstrap 列

Question

如何重新排列 bootstrap 列？我在桌面视图上有 2 列布局

这是我在桌面视图中看到的

我正在尝试在移动视图上实现此布局，这可能吗？

Answer 1

要启用此功能，您需要让每个 div 包含以下内容类：

<div class="col-lg-6 col-xs-12"></div>

查看 bootstrap 网格系统了解更多信息。

Answer 2

我找到了答案

模板

<div class="col-lg-4 col-xs-12">1</div>
<div class="col-lg-8 col-xs-12 top-features">2</div>
<div class="col-lg-4 col-xs-12 item-brand">3</div>
<div class="col-lg-8 col-xs-12"><4/div>
<div class="col-lg-4 col-xs-12">5</div>
<div class="col-lg-8 col-xs-12">6</div>

样式

@media screen and (min-width: 769px) {

  .top-features {
    order: 2;
  }

  .item-brand {
    order: 1;
  }
}

如何在移动视图中按顺序重新排列 bootstrap 列

how to rearrange bootstrap columns in order on mobile view

bootstrap-4