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

Question

Мне просто интересно, возможно ли во flexbox (без javascript, позиционирования или css-сетки) изменить макет следующим образом.На рабочем столе и на телефоне это должно выглядеть следующим образом Я использую загрузчик 4, и есть возможность изменить порядок, но даже это не в состоянии выполнитьожидание.

Я могу достичь функциональности, используя float

<div class="container">
        <div class="float-none float-lg-left col-lg-6">1</div>
        <div class="float-none float-lg-right">2</div>
        <div class="float-none float-lg-left col-lg-6">3</div>
      </div>

Answer 1

Я знаю, что немного опоздал на вопрос, не полностью Bootstrap 4 flexbox - но вы можете сделать это с display:flex и медиа-запросом.Вам просто нужно установить высоту для родителя (в данном случае .wrapper), чтобы поля 1 и 3 составляли «50%» от этой высоты.

Просмотрите фрагмент экрана во весь экран, чтобы увидеть переключениекоробки:

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
}

.box1 {
  background: #31d1d3;
}

.box2 {
  background: #bce9e2;
}

.box3 {
  background: #62b1b7;
}

@media screen and (min-width:797px) {
  .box2 {
    order: 3;
  }
  .box1,
  .box3 {
    flex: 0 0 50%;
    width: 50%;
  }
  .box2 {
    flex: 0 0 100%;
    width: 50%;
  }
}

<div class="container">
  <div class="wrapper">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
  </div>
</div>

Answer 2

Без сетки CSS возможно НО Столбец 2 ДОЛЖЕН быть меньше, чем Столбец 1 и Столбец 3 вместе взятые.

* {
    box-sizing: border-box;
}

.box {
    border: 1px solid grey;
}

@media (min-width: 576px) {

    .wrapper {
        padding-right: 50%;
        position: relative;
    }

    .box--2 {
        position: absolute;
        height: 100%;
        right: 0;
        top: 0;
        width: 50%;
    }

}

<div class="wrapper">
    <div class="box">Column 1</div>
    <div class="box box--2">Column 2</div>
    <div class="box">Column 3</div>
</div>

Размер .wrapper будет рассчитываться по высоте элементов в потоке (столбец 1 и столбец 3). Если столбец 2 выше этих двух, он будет переполнен из оболочки, и вы ничего не сможете сделать, чтобы это исправить без JavaScript.

Честно говоря, использование CSS Grid (с резервными версиями IE) является лучшим решением.