Bootstrap 3 Reorder колонки для мобильных и планшетов

Question

Я использую Bootstrap 3 и пытаюсь изменить расположение столбцов в мобильном телефоне и планшете.

Как это возможно?

Это мой код:

<div class="row main-row">
    <div class="col-md-6">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.
    </div>
    <div class="col-md-6">
    </div>
</div>

Я хочу, чтобы Bootstrap показывал
Текст
Изображение
Текст
Изображение

Сейчас он показывает
Изображение
Текст
Текст
Изображение

Есть ли способ справиться с этим?

Как это выглядит сейчас

Answer 1

К сожалению, в Bootstrap 3 вы не можете изменить порядок столбцов на маленьких экранах, но вы можете сделать это на больших экранах.В Bootstrap 4 теперь вы можете изменить порядок столбцов на небольших экранах.Ниже вы можете увидеть один из способов сделать это.

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

Answer 2

Можно использовать flex в мобильной версии.

 .main-row {
            display: flex;
            flex-flow: column;
        }

            .main-row .col-md-6 {
                display: flex;
                order: 1;
            }

            .main-row .col-md-6 +.col-md-6 {
                display: flex;
                order: 0;
            }

<div class="row main-row">
    <div class="col-md-6">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.
    </div>
    <div class="col-md-6">
    IMGES
    </div>
</div>