如何使用第一个引导程序使第三条线停靠

Question

我具有以下引导程序布局：

<div class = "col-sm-3" id = "teste1">
</ div>

<div class = "col-sm-12" id = "teste2">
</ div>

<div class = "col-sm-9" id = "teste3">
</ div>

这样，您将创建3行。我想知道是否有可能 使ID为“ teste2”的列为其创建新行，而ID为“ teste3”的列将完成ID为“ teste1”的第一列。但是，我需要使其按该列顺序排列，而不必更改为以下形式：

<div class = "col-sm-3" id = "teste1">
</ div>
<div class = "col-sm-9" id = "teste3">
</ div>
<div class = "col-sm-12" id = "teste2">
</ div>

Answer 1

您可以使用order css classes在不同屏幕尺寸上实现内容的重新排序。对于您的示例，像这样：

<div class="row">
<div class = "col-sm-3 order-sm-1" id = "teste1">
  Teste 1
</div>
  <div class = "col-sm-12 order-sm-3" id = "teste2">
    Teste 2
  </div>

  <div class = "col-sm-9 order-sm-2" id = "teste3">
    Teste 3
  </div>
</div>