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

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

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

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

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

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

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

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

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

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

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

Вот такой working example

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

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

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

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

Итак, я думаю, что собираюсь полностью отказаться от сетки начальной загрузки и переключиться на что-нибудь, использующее 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

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