Форум Сайтостроение Веб-строительство

Как у bootstrap на мобильных сделать картинку снизу

S0
На сайте с 18.05.2010
Offline
65
Sori007
620

Здравствуйте, есть следующее, на больших экранах картинка слева, а текст справа, следующая сцена уже на оборот (пример на картинке). Нужно сделать так, чтобы на мобильных картинки были все снизу, так как сейчас они располагаются одна сверху, а другая снизу, я уже пару дней не могу такое сделать, как такое сделать?

[ATTACH]169661[/ATTACH]

jpg 123453467.jpg
S0
На сайте с 18.05.2010
Offline
65
Sori007
#1

Не работает. После добавление pull-right на больших экранах все нормально, но на мобильных: картинка, текст, текст, картинка, картинка, текст, текст, картинка.

Вот мой код: 


<div class="container">

            <div class="row">

                <div class="col-lg-6 col-md-6 col-sm-6 pull-right">

                    <div class="">

                        <p>Adrianna</p>

                        <p>Senior Graphic Designer</p>

                        <hr> 

                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                    </div>

                </div>

                <div class="col-lg-6 col-md-6 col-sm-6">

                    <div class="">

                        <div class=""></div>

                    </div>

                </div>

            </div>

            

            <div class="row">

                <div class="col-lg-6 col-md-6 col-sm-6">

                    <div class="">

                        <p>Adrianna</p>

                        <p>Senior Graphic Designer</p>

                        <hr> 

                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                    </div>

                </div>

                <div class="col-lg-6 col-md-6 col-sm-6">

                    <div class="">

                        <div class=""></div>

                    </div>

                </div>

                

            </div>

            

            <div class="row">

                

                <div class="col-lg-6 col-md-6 col-sm-6 pull-right">

                    <div class="">

                        <p>Adrianna</p>

                        <p>Senior Graphic Designer</p>

                        <hr> 

                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                    </div>

                </div>

                <div class="col-lg-6 col-md-6 col-sm-6">

                    <div class="">

                        <div class=""></div>

                    </div>

                </div>

            </div>

            

            <div class="row">

                <div class="col-lg-6 col-md-6 col-sm-6">

                    <div class="">

                        <p>Adrianna</p>

                        <p>Senior Graphic Designer</p>

                        <hr> 

                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

                    </div>

                </div>

                <div class="col-lg-6 col-md-6 col-sm-6">

                    <div class="">

                        <div class=""></div>

                    </div>

                </div>

            </div>

        </div>
NothingMatters
На сайте с 12.06.2017
Offline
45
NothingMatters
#2
Sori007:
Не работает. После добавление pull-right на больших экранах все нормально, но на мобильных: картинка, текст, текст, картинка, картинка, текст, текст, картинка.

Нужно использовать col-lg-push и col-lg-pull (ну или col-md-pull/col-md-push):

<div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-lg-push-6">
                    <div class="">
                        <p>Adrianna</p>
                        <p>Senior Graphic Designer</p>
                        <hr> 
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-lg-pull-6">
                    <div class="">
                        <div class="">Картинка</div>
                    </div>
                </div>
            </div>

Вместо pull-right, тогда на мобильном они правильно схлопнутся.

S0
На сайте с 18.05.2010
Offline
65
Sori007
#3

Блин, сори. Все работает. Всем большое спасибо

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий