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

Тема в разделе "Верстка", создана пользователем Alekxander, 21 май 2020.

XEvil 4.0 Релиз Состоялся!
Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Alekxander

    Alekxander

    Регистр.:
    3 янв 2018
    Сообщения:
    186
    Симпатии:
    51
    В шаблоне применяется сетка бутстрап. Контент выводится с помощью аддонов 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>
    
     
  2. Denzy

    Denzy Постоялец

    Регистр.:
    29 июл 2016
    Сообщения:
    86
    Симпатии:
    69
  3. Alekxander

    Alekxander

    Регистр.:
    3 янв 2018
    Сообщения:
    186
    Симпатии:
    51
    Вы имеете ввиду просто поменять блоки местами. Так на обычных мониторах мне так не нужно. На обычных мониторах сначала текст, а справа карти нка.
     
  4. borodatych

    borodatych Постоялец

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

    borodatych Постоялец

    Регистр.:
    24 июн 2016
    Сообщения:
    142
    Симпатии:
    86
    Лучше новый, а то обновления не увидите
    На вашем примере, попробуйте так:
    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 нравится это.
  6. Alekxander

    Alekxander

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

    Alekxander

    Регистр.:
    3 янв 2018
    Сообщения:
    186
    Симпатии:
    51
    Немного помучался, но к сожалению не смог подобным образом сделать задуманное. Пробовал Ваш вариант тоже.
    Данную статью читал. Пытался вникнуть и пробовал. Но не получилось.
    А получилось другим способом. Хотя при чтении Данной статьи не сразу вникнул как нужно делать. И только методом научного ) втыка получилось. Спасибо всем за помощь.
     
  8. borodatych

    borodatych Постоялец

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

    Alekxander

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

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