Как изменить порядок столбцов начальной загрузки по вертикали

Я пытаюсь создать в Bootstrap v3 следующий макет:

|  Small       |   Large            |
|--------------|--------------------|
| [A         ] | [A      ][B      ] |
| [A.1       ] | [A.1             ] |
| [B         ] |                    |

Хотя об этом уже много раз спрашивали раньше ...

Все эти ответы основывались на использовании push | pull, которые перемещают объекты влево и вправо внутри строки. Если мы воспользуемся советом в этих потоках и начнем с мобильного макета выше, секция A.1 полной ширины займет всю вторую строку в широком макете, и в этот момент смещение вещей вправо и влево не принесет никакой пользы, кроме скрытия этих элементов за пределами экрана.

Пример

В: есть ли способ сдвинуть элемент по вертикали в зависимости от размера экрана?

Демо в jsFiddle | StackSnippets

.a, .b {  border: 1px solid lightgrey;}
.a { color: green;}
.b { color: blue;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col col-sm-6 a">Section A</div>
    <div class="col col-xs-12 a">More Info about Section A</div>
    <div class="col col-sm-6 b">Section B</div>
  </div>
</div>


html css twitter-bootstrap twitter-bootstrap-3 grid-layout
person KyleMit    schedule 08.11.2017    source источник
comment
Какую версию начальной загрузки вы используете?   -  person Jordi Vicens    schedule 08.11.2017
comment
У меня не так много времени, но в bootstrap v4 у него есть класс с именем order-x, и вы также можете использовать его с разрешениями (order-md-X). Если он существует в bootstrap 3, он вас поразит. Если нет, вы можете использовать это свойство напрямую через css, также называемое order: x;   -  person Jordi Vicens    schedule 08.11.2017
comment
Как вы хотите, чтобы это выглядело на больших экранах? Я не слежу.   -  person Serg Chernata    schedule 08.11.2017
comment
@SergChernata, правда? Я хочу, чтобы он выглядел именно так, как я описал в первом разделе, а затем уточнил с помощью снимка экрана и стрелок. Где вы не следите. Есть два примера того, как я хочу, чтобы он выглядел, и еще один того, как он выглядит сейчас.   -  person KyleMit    schedule 08.11.2017
comment
@KyleMit Теперь я вижу, много ли в этих разделах контента или они маленькие?   -  person Serg Chernata    schedule 08.11.2017
comment
@SergChernata, это упрощенный пример для демонстрации с минимальным кодом. В моем реальном сценарии в каждом разделе слишком много контента, но он не должен изменять базовую структуру и механизм изменения положения div-ов родительского уровня.   -  person KyleMit    schedule 08.11.2017
comment
У меня есть 2 варианта, но я не хочу писать об этом, если вам это не интересно: абсолютное позиционирование для больших экранов или использование классов начальной загрузки для скрытия и отображения дублирующихся разделов B div.   -  person Serg Chernata    schedule 08.11.2017

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете добиться этого с помощью flexbox.

Все три блока должны находиться внутри гибкого контейнера display: flex;. Затем вы даете всем div внутри гибкого контейнера порядок, который запускается с использованием медиа-запроса с желаемой шириной экрана order: 1;.

Другие основные части CSS предназначены для того, чтобы убедиться, что три поля имеют правильный размер в столбце.

flex-direction: row;
flex-grow: 1;
flex-wrap: wrap

HTML

<div class="container">
  <div class="row flex-container">
    <div id="sectionA" class="col col-sm-12 col-md-6 a">Section A</div>
    <div id="sectionAInfo" class="col col-xs-12 a">More Info about Section A</div>
    <div id="sectionB" class="col col-sm-12 col-md-6 b">Section B</div>
  </div>
</div>

CSS

@media screen and (min-width: 991px) {
  .flex-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-wrap: wrap
  }
  #sectionA {
    order: 1;
  }
  #sectionAInfo {
    order: 3;
  }
  #sectionB {
    order: 2;
    float: right;
  }
}

Рабочий код https://codepen.io/Washable/pen/zPoeqY?editors=1100

person TidyDev    schedule 08.11.2017