Изменение порядка столбцов с помощью Bootstrap и / или Bootstrap flex

Question

В настоящее время у меня есть это:

                <div class="row">
                    <div class="col-md-6">
                        <p>A long borring text</p>
                    </div>

                    <div class="col-md-6">
                        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
                    </div>               
                </div>

на мобильном это приводит к порядку #1 текст № 2 фото, но я хочу, чтобы фото было № 1 и текст № 2 в порядке.

Answer 1

HTML

<div class="row flex reverse-column">
    <div class="col-md-6">
        <p>A long borring text</p>
    </div>

    <div class="col-md-6">
        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
    </div>               
</div>

CSS

  @media( max-width: 767px ){

    .flex{
      display: flex;
    }
    .flex.reverse-column{
      flex-direction: column-reverse;
    }
  }

Answer 2

Добавьте два идентификатора в два div, и вы можете перевернуть div, используя jquery, но здесь я использую только css. надеюсь, что это сделает вашу работу.

  <style>
  /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

.row   { display: table; }
#first  { display: table-footer-group; }
#second { display: table-header-group; }
}

</style>
                <div class="row" >
                    <div class="col-md-6" id ="first">
                        <p>A long borring text</p>
                    </div>

                    <div class="col-md-6" id="second">
                        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
                    </div>               
                </div>