Css 引导4中的Flex布局列宽

我正在尝试在手机上按不同的顺序分解一些元素，我现在有了类似的东西

还有我的html

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

我说得很简单，你可以帮助我，我需要的是，现在palge lpaut是一半，我需要黄色容器是75%，右边是25%，我使用boostrap 4，但我不太擅长fex布局

---

谢谢

您可以使用

flex:1 percentage（）例如
flex:1个百分比（1/4）

在这里，我用codepen为您做了一个示例：
这样包装器在左边，黄色在右边？请给代码添加一些解释，以便其他人可以从itI中学习。添加了一个示例
  .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;
  }

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