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

Alekxander

Постоялец
Регистрация
3 Янв 2018
Сообщения
370
Реакции
142
В шаблоне применяется сетка бутстрап. Контент выводится с помощью аддонов 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>
 

Alekxander

Постоялец
Регистрация
3 Янв 2018
Сообщения
370
Реакции
142
Возможно глупый вопрос, а так пробовали?:
Скрытое содержимое доступно для зарегистрированных пользователей!
Вы имеете ввиду просто поменять блоки местами. Так на обычных мониторах мне так не нужно. На обычных мониторах сначала текст, а справа карти нка.
 

borodatych

Постоялец
Регистрация
24 Июн 2016
Сообщения
159
Реакции
104
Вы имеете ввиду просто поменять блоки местами. Так на обычных мониторах мне так не нужно. На обычных мониторах сначала текст, а справа карти нка.
Херню сморозил, поэтому удалил, но не успел видимо)
push и pull, не успел дочитать, устанавливают порядок, но с разных сторон
Зачем такая путаница, тоже не знаю
Используйте просто что-то одно
col-lg-pull-* сортируем справа на лево
или
col-lg-push-* слева на право
 

borodatych

Постоялец
Регистрация
24 Июн 2016
Сообщения
159
Реакции
104
Лучше новый, а то обновления не увидите
На вашем примере, попробуйте так:
HTML:
<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

Постоялец
Регистрация
3 Янв 2018
Сообщения
370
Реакции
142
Херню сморозил, поэтому удалил, но не успел видимо)
push и pull, не успел дочитать, устанавливают порядок, но с разных сторон
Зачем такая путаница, тоже не знаю
Используйте просто что-то одно
col-lg-pull-* сортируем справа на лево
или
col-lg-push-* слева на право
Бывает...
Я тоже иногда быстро прочитаю и думаю такой-так херня ведь... А потом вникну и задумываюсь. )))
По поводу push и pull не принципиально. просто с десяток ссылок именно таким образом предлагают решить подобным моему вопрос.
Попробую Ваш вариант. Спасибо.
 

Alekxander

Постоялец
Регистрация
3 Янв 2018
Сообщения
370
Реакции
142
Херню сморозил, поэтому удалил, но не успел видимо)
push и pull, не успел дочитать, устанавливают порядок, но с разных сторон
Зачем такая путаница, тоже не знаю
Используйте просто что-то одно
col-lg-pull-* сортируем справа на лево
или
col-lg-push-* слева на право
Немного помучался, но к сожалению не смог подобным образом сделать задуманное. Пробовал Ваш вариант тоже.
Данную статью читал. Пытался вникнуть и пробовал. Но не получилось.
А получилось другим способом. Хотя при чтении Для просмотра ссылки Войди или Зарегистрируйся статьи не сразу вникнул как нужно делать. И только методом научного ) втыка получилось. Спасибо всем за помощь.[/URL]
 

borodatych

Постоялец
Регистрация
24 Июн 2016
Сообщения
159
Реакции
104
Поделитесь хоть к чему пришли
Так полагаю вы использовали сортировку от флекс контейнера
Но лучше использовать классы
Попробуйте вместо `col-sm-push-X` использовать `order-sm-X`
 

Alekxander

Постоялец
Регистрация
3 Янв 2018
Сообщения
370
Реакции
142
Поделитесь хоть к чему пришли
Так полагаю вы использовали сортировку от флекс контейнера
Но лучше использовать классы
Попробуйте вместо `col-sm-push-X` использовать `order-sm-X`
Я не претендую на самое правильное решение. Скажем так, для меня более простое в применении. Возможно и не самое хорошее. Ничего плохого не выявлено. Здесь добавил классы. col1 col2
Скрытое содержимое доступно для зарегистрированных пользователей!
И добавил стили, к существующим. Получилось то, что хотелось.
Скрытое содержимое доступно для зарегистрированных пользователей!
 
Сверху