Bootstrap 4 - мое мобильное устройство не встанет в очередь на мобильном устройстве

Question

В настоящее время я пытаюсь использовать Bootstrap 4, и мне нужна ваша помощь, я хочу создать сетку из 2 столбцов со строкой, и когда она станет на мобильном устройстве, второй столбец перейдет в строку:

ИтакЯ делаю это:

        <div class="row">
            <div class="col-md-10 offset-md-1 col-sm-10 offset-sm-1">
                <div class="col-md-6 col-sm-12">
                    <img src="my source" alt="My alt" />
                </div>
                <div class="col-md-6 col-sm-12">
                    <h2>My title</h2>
                    <p>My text</p>
                </div>
            </div>
        </div>

, который работал на Bootstrap 3, но он не работает в V4.

Я хочу что-то вроде этого:

.row>div{
  width: 49.7%;
  display: inline-block;
}
@media screen and (max-width: 991px){
  .row>div{
    width: 100%;
    display: block;
  } 
}

<div class="row">
  <div id="first_column">My first column</div>
  <div id="second_column">My second column</div>
</div>

Как я могу это сделать?Спасибо за помощь,

Answer 1

Вы поняли это почти правильно.Я удалил этот div:

<div class="col-md-10 offset-md-1 col-sm-10 offset-sm-1">

Так что я думаю, что это код, который вы ищете:

<div class="row">
   <div class="col-sm-12 col-md-6">
      <img src="my source" alt="My alt" />
   </div>
   <div class="col-sm-12 col-md-6">
      <h2>My title</h2>
      <p>My text</p>
   </div>
</div>

Это отлично работает с Bootstrap 4.

См .: https://jsfiddle.net/5d2n72r4/