html - 如何在响应时重新排列此 div

Question

我想在到达 col-sm-12 时重新排列此 div，“两个”将位于“一个”之上。有什么办法可以做到吗？谢谢。我会很感激。我的代码在下面

.one {
  height: 200px;
  border: 5px solid red;
}

.two {
  height: 200px;
  border: 5px solid blue
}

p {
  text-align: center;
  vertical-align: center;
  margin: auto;
  font-size: 3em;
  font-weight: bold;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="one col-lg-6 col-md-6 col-sm-12">
      <p>1</p>
    </div>
    <div class="two col-lg-6 col-md-6 col-sm-12">
      <p>2</p>
    </div>
  </div>
</div>

Answer 1

在媒体查询中使用order 属性。

@media only screen and (max-width: 576px) {
    .one {
        order: 2;    
    }
    .two {
        order: 1;    
    }
}

.one {
  height: 200px;
  border: 5px solid red;
  order: 2;
}

.two {
  height: 200px;
  border: 5px solid blue;
  order: 1;
}

p {
  text-align: center;
  vertical-align: center;
  margin: auto;
  font-size: 3em;
  font-weight: bold;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="one col-lg-6 col-md-6 col-sm-12">
      <p>1</p>
    </div>
    <div class="two col-lg-6 col-md-6 col-sm-12">
      <p>2</p>
    </div>
  </div>
</div>