Изменить порядок адаптивных блоков (Бутстрап) в мобильной версии

[Alekxander]

В шаблоне применяется сетка бутстрап. Контент выводится с помощью аддонов SP Page Builder.
В одном блоке есть два дочерних блока. Слева выводится текст, а справа картинка.
На мобильных устройствах картинка выводится после текста. Как сделать чтобы на мобильных устройствах картинка выводилась первой? Читал про классы push и pull. К сожалению попытки сделать свелись к нулю. Подскажите плииз.

<div id="sppb-addon-1481779604" class="clearfix">
    <div class="sppb-addon sppb-addon-fancy-cta ">
      <div class="sppb-row sppb-no-gutter">
        <div class="sppb-col-md-7">
            <div class="sppb-addon-content" style="panel-default">
               <i class="sb-bistro-burger sppb-fancy-cta-icon sppb-wow bounceIn sppb-animated" style="visibility: visible; animation-name: bounceIn;"></i>
               <h3 class="sppb-fancy-cta-title">Lorem</h3>
               <div class="sp-fancy-cta-text">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               </div>
               <a target="_blank" id="btn-1481779604" class="sppb-btn sppb-btn-xs sppb-btn-custom sppb-btn-rounded"></a>
            </div>
        </div>
        <div class="sppb-col-md-5 sbbp-img-container">
           <div class="sppb-position-right">
            <img src="/images/2020/04/17/70035263962.jpg" alt="Lorem">
           </div>
        </div>
      </div>
    </div>
</div>

 

[Denzy]

Для просмотра ссылки Войди или Зарегистрируйся

 

[Alekxander]

Возможно глупый вопрос, а так пробовали?:

Вы имеете ввиду просто поменять блоки местами. Так на обычных мониторах мне так не нужно. На обычных мониторах сначала текст, а справа карти нка.

 

[borodatych]

Вы имеете ввиду просто поменять блоки местами. Так на обычных мониторах мне так не нужно. На обычных мониторах сначала текст, а справа карти нка.

Херню сморозил, поэтому удалил, но не успел видимо)
push и pull, не успел дочитать, устанавливают порядок, но с разных сторон
Зачем такая путаница, тоже не знаю
Используйте просто что-то одно
col-lg-pull-* сортируем справа на лево
или
col-lg-push-* слева на право

 

[borodatych]

Лучше новый, а то обновления не увидите
На вашем примере, попробуйте так:

<div id="sppb-addon-1481779604" class="clearfix">
    <div class="sppb-addon sppb-addon-fancy-cta ">
      <div class="sppb-row sppb-no-gutter">
        <div class="sppb-col-md-7 col-sm-push-2">
            <div class="sppb-addon-content" style="panel-default">
               <i class="sb-bistro-burger sppb-fancy-cta-icon sppb-wow bounceIn sppb-animated" style="visibility: visible; animation-name: bounceIn;"></i>
               <h3 class="sppb-fancy-cta-title">Lorem</h3>
               <div class="sp-fancy-cta-text">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               </div>
               <a target="_blank" id="btn-1481779604" class="sppb-btn sppb-btn-xs sppb-btn-custom sppb-btn-rounded"></a>
            </div>
        </div>
        <div class="sppb-col-md-5 sbbp-img-container col-sm-push-1">
           <div class="sppb-position-right">
            <img src="/images/2020/04/17/70035263962.jpg" alt="Lorem">
           </div>
        </div>
      </div>
    </div>
</div>

 

[Alekxander]

Херню сморозил, поэтому удалил, но не успел видимо)
push и pull, не успел дочитать, устанавливают порядок, но с разных сторон
Зачем такая путаница, тоже не знаю
Используйте просто что-то одно
col-lg-pull-* сортируем справа на лево
или
col-lg-push-* слева на право

Бывает...
Я тоже иногда быстро прочитаю и думаю такой-так херня ведь... А потом вникну и задумываюсь. )))
По поводу push и pull не принципиально. просто с десяток ссылок именно таким образом предлагают решить подобным моему вопрос.
Попробую Ваш вариант. Спасибо.

 

[Alekxander]

Херню сморозил, поэтому удалил, но не успел видимо)
push и pull, не успел дочитать, устанавливают порядок, но с разных сторон
Зачем такая путаница, тоже не знаю
Используйте просто что-то одно
col-lg-pull-* сортируем справа на лево
или
col-lg-push-* слева на право

Немного помучался, но к сожалению не смог подобным образом сделать задуманное. Пробовал Ваш вариант тоже.

Для просмотра ссылки Войди или Зарегистрируйся

Данную статью читал. Пытался вникнуть и пробовал. Но не получилось.
А получилось другим способом. Хотя при чтении Для просмотра ссылки Войди или Зарегистрируйся статьи не сразу вникнул как нужно делать. И только методом научного ) втыка получилось. Спасибо всем за помощь.[/URL]

 

[borodatych]

Поделитесь хоть к чему пришли
Так полагаю вы использовали сортировку от флекс контейнера
Но лучше использовать классы
Попробуйте вместо `col-sm-push-X` использовать `order-sm-X`

 

[Alekxander]

Поделитесь хоть к чему пришли
Так полагаю вы использовали сортировку от флекс контейнера
Но лучше использовать классы
Попробуйте вместо `col-sm-push-X` использовать `order-sm-X`

Я не претендую на самое правильное решение. Скажем так, для меня более простое в применении. Возможно и не самое хорошее. Ничего плохого не выявлено. Здесь добавил классы. col1 col2

И добавил стили, к существующим. Получилось то, что хотелось.