css - 引导程序 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 是一半，我需要黄色容器为 75% 和正确的 25%，我使用 boostrap 4 但我不太擅长 fex 布局

谢谢

标签： cssbootstrap-4flexbox

Answer 1

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