Ширина столбца гибкого макета в bootstrap 4

Question

Я пытаюсь разбить некоторые элементы в другом порядке на мобильном телефоне, у меня сейчас что-то вроде этого

И мой html

  <main>
    <div data-color="yellow"></div>
    <div class="wrapper">
      <div data-color="orange"></div>
      <div data-color="purple"></div>
    </div>
  </main>

Вот мой css

  .wrapper {
    flex-direction: column;
  }

  div {
    flex: 1;
  }

  [data-color=purple] {
    order: 3;
  }

  main.mobile {
    flex-direction: column;
  }

  main.mobile .wrapper {
    display: contents;
  }

  main.mobile [data-color=orange] {
    order: -2;
  }

Я упростил задачу, что вы можете мне помочь, мне нужно то, что теперь palge lpaut наполовину, мне нужно желтый контейнер на 75% и правый 25%, я использую Boostrap 4, но я не очень хорош в макете fex

Спасибо

Answer 1

main {
 display: flex;
}
[data-color="yellow"] {
 flex: 0 0 75%;
}
.wrapper{
 flex: 0 0 25%;
}

Answer 2

вы можете использовать flex: 1 percentage(); например flex: 1 percentage(1/4);

Здесь я сделал для вас пример в коде: https://codepen.io/Alirezaaraby/pen/JjYJMZW?editors=1100