如何在响应时重新安排这个div

Question

当我达到col-sm-12时，我想重新安排这个div，“两个”将在“one”之上。有什么方法可以做到。谢谢。我会很感激。我的代码在

之下

.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;    
    }
}

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这段代码。

<div class="container">
  <div class="row">
    <div class="one col-lg-6 col-md-6 col-sm-12 order-xs-2">
      <p>1</p>
    </div>
    <div class="two col-lg-6 col-md-6 col-sm-12 order-xs-1">
      <p>2</p>
    </div>
  </div>
</div>