Бутстрап, разлетаются колонки в разные стороны при переупорядочивании колонок?

Question

[iminby]

Здравствуйте.

<div class="container">
            <div class="row">
               <div class="col-xs-12 col-sm-12 col-lg-6">
                  <p class="right-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae assumenda tempora natus, ad optio harum provident aperiam sint corporis qui fuga odit voluptatum est ea nam voluptates, laudantium, voluptas cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique quia et quae optio est aliquid ratione natus rerum, soluta accusamus libero asperiores ducimus alias consectetur quasi suscipit tenetur quibusdam, ipsa!</p>
               </div>
               <div class="col-xs-12 col-sm-12 col-lg-6">
                  <h2 class="left-h2">Заголовок весь такой красивый</h2>
                  <p><a href="#" class="button-details button-details-light">Узнать подробности</a></p>
               </div>
            </div>
         </div>

Добавляю для перемещения блоков

<div class="col-xs-12 col-xs-push-12 col-sm-12 col-lg-6">
<div class="col-xs-12 col-xs-pull-12 col-sm-12 col-lg-6">

Оно на всех разрешениях разлетается в разные стороны, за зоны контейнера
что не так делаю?

Answer 1

[Shinso]

Делай наоборот, на большом экране перемести правый влево а левый вправо, а затем на том же большом сделай им пуш и пулл чтобы переместить на нужные места.

<div class="row">
               <div class="col-xs-12 col-sm-12 col-lg-6 col-lg-push-6">
                  <h2 class="left-h2">Заголовок весь такой красивый</h2>
                  <p><a href="#" class="button-details button-details-light">Узнать подробности</a></p>
               </div>
               <div class="col-xs-12 col-sm-12 col-lg-6 col-lg-pull-6">
                  <p class="right-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae assumenda tempora natus, ad optio harum provident aperiam sint corporis qui fuga odit voluptatum est ea nam voluptates, laudantium, voluptas cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique quia et quae optio est aliquid ratione natus rerum, soluta accusamus libero asperiores ducimus alias consectetur quasi suscipit tenetur quibusdam, ipsa!</p>
               </div>
            </div>

Comments

[iminby]

спасибо

Answer 2

[iBird Rose]

а как ты хочешь чтобы они выглядели? вертикально ты никак не можешь перемещать элементы. только вправо или влево. вот и исходи из этого

Comments

[iminby]

Мне нужно, чтобы на маленьких экранах блок который справа стал сверху, а не снизу.
Чтобы на мобиле, заголовок справа стал сверху

[iBird Rose]

iminby: ну тк в html и делай блок заголовка первым. а не вторым

[iminby]

iBird Rose: Понял спасибо.
А почему , что есть в мануалах не работает как надо?
col-xs-push-
col-xs-pull-

[iBird Rose]

iminby: оно работает. оно двигает элемент вправо или влево. но не вверх и вниз же.

[iBird Rose]

iminby: тобишь ты размещаешь в html свой заголовок первым. а на больших экранах смещаешь его вправо через push, а второй блок влево - через pull. а на мобилках у тебя как был заголовок на первом месте - так и останется

Answer 3

[KazeZlat]

Если внимательно посмотреть реализацию push и pull, то можно увидеть что они перемещают элементы внутри одной строки горизонтально. Перемещаешь влево на 12 колонку шириной в 12 - она уходит за экран.

То, что тебе нужно делается средствами медиа запросов и flexbox/js. Чтобы не ломать сетку bootstrap - остается js.