Загрузочный сложный порядок расположения столбцов

#css #twitter-bootstrap-3

Вопрос:

Возможно ли pull/push divs of a column из another column в сеточной системе начальной загрузки? Например:

При просмотре на рабочем столе: это так:

 Parent Column 1 | Parent Column 2
First Content   | Second Content
Third Content   | Fourth Content

В мобильном представлении это выглядит так:

 Parent Column 1
First Content
Second Content
Parent Column 2
Third Content
Fourth Content

Пожалуйста, взгляните на эту скрипку, чтобы понять, что я пытаюсь иметь в виду.Заранее спасибо.

Ответ №1:

Вы можете достичь этого, используя сетку bootstrap.

 .first {
  background: yellow;
  height: 300px;
}
.second {
  background: red;
  height: 100px;
  color: white;
}
.third {
  background: green;
  height: 300px;
  color: white;
}
.fourth {
  background: blue;
  height: 100px;
  color: white;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">

  <div class="row">
    <div class="col-sm-6 col-xs-12 first">
      FIRST
    </div>
    <div class="col-sm-6 col-xs-12 second">
      SECOND
    </div>
    <div class="col-sm-6 col-xs-12 third">
      THIRD
    </div>
    <div class="col-sm-6 col-xs-12 fourth">
      FOURTH
    </div>
  </div>
</div>

Или вы можете использовать Masonry JS:

 var $container = $('.masonry-container');
$container.masonry({
  columnWidth: '.item',
  itemSelector: '.item'
});

 .first {
  background: yellow;
  height: 300px;
}
.second {
  background: red;
  height: 100px;
  color: white;
}
.third {
  background: green;
  height: 300px;
  color: white;
}
.fourth {
  background: blue;
  height: 100px;
  color: white;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">

  <div class="row masonry-container">
    <div class="col-sm-6 col-xs-12 first item">
      FIRST
    </div>
    <div class="col-sm-6 col-xs-12 second item">
      SECOND
    </div>
    <div class="col-sm-6 col-xs-12 third item">
      THIRD
    </div>
    <div class="col-sm-6 col-xs-12 fourth item">
      FOURTH
    </div>
  </div>
</div>

1. На большом экране это выглядит так: i.imgur.com/bsobN7g.png

2. Спасибо! Но, я думаю, мне понадобится «Третий» div ниже «Первого» div и «Четвертый» div ниже «Второго» div для просмотра на рабочем столе.

Ответ №2:

Я думаю, что проблема скорее связана с плавающей точкой, потому что ваши столбцы имеют переменную высоту. Создайте специальный класс, чтобы правильно отображать 2-й и 3-й столбцы на больших экранах..

 @media (min-width: 992px) {
    .pull-md-right {
        float:right;
    }
}

И используйте это так..

     <div class="row">
        <div class="col-md-6">
            <div class="first">First</div>
        </div>
        <div class="col-md-6 pull-md-right">
            <div class="second">Second</div>
        </div>
        <div class="col-md-6 pull-md-right">
            <div class="third">Third</div>
        </div>
        <div class="col-md-6">
            <div class="fourth">Fourth</div>
        </div>
    </div>

http://codeply.com/go/CYteNdheKS

В Bootstrap 4 включены адаптивные поплавки, поэтому вам не понадобится дополнительный CSS.