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

Alekxander

Мой дом здесь!
Регистрация
3 Янв 2018
Сообщения
490
Реакции
236
В шаблоне применяется сетка бутстрап. Контент выводится с помощью аддонов 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>
 
Возможно глупый вопрос, а так пробовали?:
Скрытое содержимое доступно для зарегистрированных пользователей!
Вы имеете ввиду просто поменять блоки местами. Так на обычных мониторах мне так не нужно. На обычных мониторах сначала текст, а справа карти нка.
 
Вы имеете ввиду просто поменять блоки местами. Так на обычных мониторах мне так не нужно. На обычных мониторах сначала текст, а справа карти нка.
Херню сморозил, поэтому удалил, но не успел видимо)
push и pull, не успел дочитать, устанавливают порядок, но с разных сторон
Зачем такая путаница, тоже не знаю
Используйте просто что-то одно
col-lg-pull-* сортируем справа на лево
или
col-lg-push-* слева на право
 
Лучше новый, а то обновления не увидите
На вашем примере, попробуйте так:
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>
 
Херню сморозил, поэтому удалил, но не успел видимо)
push и pull, не успел дочитать, устанавливают порядок, но с разных сторон
Зачем такая путаница, тоже не знаю
Используйте просто что-то одно
col-lg-pull-* сортируем справа на лево
или
col-lg-push-* слева на право
Бывает...
Я тоже иногда быстро прочитаю и думаю такой-так херня ведь... А потом вникну и задумываюсь. )))
По поводу push и pull не принципиально. просто с десяток ссылок именно таким образом предлагают решить подобным моему вопрос.
Попробую Ваш вариант. Спасибо.
 
Херню сморозил, поэтому удалил, но не успел видимо)
push и pull, не успел дочитать, устанавливают порядок, но с разных сторон
Зачем такая путаница, тоже не знаю
Используйте просто что-то одно
col-lg-pull-* сортируем справа на лево
или
col-lg-push-* слева на право
Немного помучался, но к сожалению не смог подобным образом сделать задуманное. Пробовал Ваш вариант тоже.
Данную статью читал. Пытался вникнуть и пробовал. Но не получилось.
А получилось другим способом. Хотя при чтении Для просмотра ссылки Войди или Зарегистрируйся статьи не сразу вникнул как нужно делать. И только методом научного ) втыка получилось. Спасибо всем за помощь.[/URL]
 
Поделитесь хоть к чему пришли
Так полагаю вы использовали сортировку от флекс контейнера
Но лучше использовать классы
Попробуйте вместо `col-sm-push-X` использовать `order-sm-X`
 
Поделитесь хоть к чему пришли
Так полагаю вы использовали сортировку от флекс контейнера
Но лучше использовать классы
Попробуйте вместо `col-sm-push-X` использовать `order-sm-X`
Я не претендую на самое правильное решение. Скажем так, для меня более простое в применении. Возможно и не самое хорошее. Ничего плохого не выявлено. Здесь добавил классы. col1 col2
Скрытое содержимое доступно для зарегистрированных пользователей!
И добавил стили, к существующим. Получилось то, что хотелось.
Скрытое содержимое доступно для зарегистрированных пользователей!
 
Назад
Сверху