如何在表格行中重定位表格单元格？

我有一个tr和3 td.我需要将第一和第三td宽度分别设为50%,第二个宽度为100%,并且在这两行之下.我知道这是一项奇怪的任务,但我需要用css或js做到这一点.

另一种更优雅的方法,使用flex-box的order属性.

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapsed;
}

tr {
  display: flex;
  flex-wrap: wrap;
}

td {
  text-align: center;
  line-height: 30px;
  flex: 1;
  width: 50%;
  
  border: 2px solid white;
  background-color: gray;
}

td:nth-child(2) {
  order: 3;
  min-width: calc(100% - 6px);
}

  
A
  
  
B
 
  
C is a really, really, really long content box, showing how the height of a cell doesn't make a difference.