Как я могу изменить этот divs при реагировании

Timilehin Osaze Adegbulugbe спросил: 28 апреля 2018 в 09:46 в: html

Пожалуйста, я хочу изменить этот divs, когда он достигнет col-sm-12, что "два" будут поверх "одного". Есть ли способ, которым я могу это сделать. Благодарю. Я буду очень признателен. Мой код ниже

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

2 ответа

Есть решение
Nandita Arora Sharma ответил: 28 апреля 2018 в 10:05

Использовать свойство 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>
Timilehin Osaze Adegbulugbe ответил: 28 апреля 2018 в 10:03
я хочу, чтобы он менялся, когда я изменяю размер экрана до col-sm-12 не на полном экране
Nandita Arora Sharma ответил: 28 апреля 2018 в 10:05
Проверьте обновленный ответ
Nandita Arora Sharma ответил: 28 апреля 2018 в 10:16
@TimilehinOsazeAdegbulugbe Это работало сейчас?
Timilehin Osaze Adegbulugbe ответил: 28 апреля 2018 в 10:18
он работал на 767px
Nandita Arora Sharma ответил: 28 апреля 2018 в 10:18
Это зависит, когда вы хотите, чтобы он работал :)
Aryan Twanju ответил: 28 апреля 2018 в 01:56

Попробуйте этот код.

<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>
Timilehin Osaze Adegbulugbe ответил: 28 апреля 2018 в 10:03
я хочу, чтобы он менялся, когда я изменяю размер экрана до col-sm-12 не на полном экране
Aryan Twanju ответил: 28 апреля 2018 в 01:57
Я отредактировал свой ответ, я думаю, это решит вашу проблему сейчас.