vue框架这种样式应该怎么改

img


img


请问我想把等待队列和通话队列改到如图所示的位置和大小，应该怎么改代码

加一点div，用flex布局

<div class="box">

   <div class="left">  
     <div>工单状态<div/>
     <div>工单分析<div/> 
   </div>

    <div class="right">
       <div>等待队列<div/>
       <div>通话队列<div/> 
    </div>

</div>

```html


```css
.box{
  display:flex;
}

工单分析和工单状态 用a-col span="12" 包起来

等待队列 用a-col span="6" 包起来

通话队列 用a-col span="6" 包起来