我有3个项目显示不同的移动的和桌面，
对于移动的：3个项目将显示在全宽度，使这是罚款已经。
对于台式机：我想让A部分和B部分在垂直方向上紧接着，C部分在右边，A部分有一些不需要的空间。
移动的：（它适用于此代码段）x1c 0d1x桌面预期：

我得到了什么：

下面是代码片段，如何实现效果？谢谢！

.flex{
  display: flex
}

.flex-col{
  flex-direction: column
}

.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity))
}

.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity))
}

.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity))
}

@media (min-width: 640px){
  .sm\:w-4\/12{
    width: 33.333333%
  }

  .sm\:w-8\/12{
    width: 66.666667%
  }

  .sm\:flex-row{
    flex-direction: row
  }

  .sm\:flex-wrap{
    flex-wrap: wrap
  }
}

<div class="flex flex-col sm:flex-row sm:flex-wrap">
  <div class="bg-red-50 sm:w-8/12">Section A</div>
  <div class="bg-purple-50 sm:w-4/12">Section B
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
  </div>
  <div class="bg-blue-50 sm:w-8/12">Section C</div>
</div>