引导程序 4 中的 Flex 布局列宽

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 是一半，我需要 yellow 容器为 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);

这里我用codepen为你做了一个例子： https://codepen.io/Alirezaaraby/pen/JjYJMZW?editors=1100