Может ли Bootstrap складывать 1-й и 3-й столбец рядом со 2-м на рабочем столе?

Question

У меня есть макет, который я пытаюсь создать, довольно простой для мобильных устройств:

[A]
[B]
[C]

Но на рабочем столе я пытаюсь сделать [B] больше и двигаться вправо.сторона, в то время как A и C располагаются слева.

[ A ][ B ]
[ C ][ B ]

Может ли Bootstrap 4 сделать это или мне нужно написать собственную сетку css?

Обновление: вот пример с базовыммакет у меня сейчас:

.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
img {max-width: 100%; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="a col-md-5">
      A
    </div>
    <div class="b col-md-7">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg" alt="B (should be right of A and C on desktop)" />
    </div>
    <div class="c col-md-5">
      <p>C (should be below A and left of B on desktop)</p>
    </div>
  </div>
</div>

https://codepen.io/nfriedly/pen/rqMLBw

Обновление 2: вот несколько изображений, чтобы прояснить ситуацию.([A] красный, [B] синий (с изображением), [C] зеленый.)

Текущее расположение:

Желаемая раскладка:

Answer 1

В конечном счете, кажется, что ответ «нет, компоновка на основе flexbox Bootstrap не может этого сделать».

Как показывает JoostS , макет можно сделать с помощью position 'ing и !important, но это не совсем bootstrap .Это больше похоже на то, как бутстрап был побежден в подчинении, сражаясь со мной все время.

Итак, я думаю, что я собираюсь полностью отбросить сетку бутстрапа и переключиться на что-то, используя display: grid:

.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
img {max-width: 100%; }

@media (min-width: 768px) {
  .grid-container {
    border: 1px solid black;
    display: grid;
  }
  .b {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="grid-container">
    <div class="a">
      A
    </div>
    <div class="b">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg" alt="B (should be right of A and C on desktop)" />
    </div>
    <div class="c">
      <p>C (should be below A and left of B on desktop)</p>
    </div>
  </div>
</div>

https://codepen.io/nfriedly/pen/bmweKB?editors=1100

Это дает мне поведение, которое я хочу, не чувствуя, что я прибегаю к взломам и сражаюсь со своими инструментами. может не работать в устаревших браузерах , но это приемлемо для моего варианта использования.

Answer 2

Если вы используете Bootstrap 4, вы можете упорядочить столбец строки по своему усмотрению, используя свойство 'order'.Например, если вы хотите, чтобы столбец C был перед столбцом B, вы можете просто сделать это:

C{ order : 1; }
B{ order : 2;}

И столбец A уже имеет порядок: 0.

Answer 3

Вы можете оформить заказ на классы, найденные в документации начальной загрузки (переход к переупорядочению).

Вы также можете использовать его с параметрами размера экрана, чтобы он следовал этому порядку только при просмотре страницы с заданным размером экрана.Это можно сделать, добавив xs, sm, md или lg.

<div class=“col-sm-3 order-md-3”>
    <p> sample </p>
 </div>

Вот working example

С другой стороны, ширина столбцов также может быть увеличена как this.

Если это не решит вашу проблему.Я, по крайней мере, надеюсь, что это даст вам представление о том, как это сделать, используя только начальную загрузку :)

Answer 4

Вы можете сделать [B] абсолютным на рабочем столе и позволить ему придерживаться правой стороны контейнера.Используйте этот CSS:

@media (min-width: 600px) {
  .container {position: relative;}
  .b {position: absolute; right: 0; top: 0;}
}

Обратите внимание, что 600px должен быть равен точке останова вашего рабочего стола.

Вот рабочая версия .