我正在嘗試創建以下結構:

.rowblock {
 display: flex;
 padding: 0.5rem;
 width: 100%;
 flex-direction: row;
}
.col {
 height: 50px;
 border: 1px solid #ccc;
}

<div class="rowblock">
 <div class="col">10% Width</div>
 <div class="col">80% Width</div>
 <div class="col">100% on Next Row</div>
 <div class="col">10%</div>
</div>

.rowblock {
  display: flex;
  padding: 0.5rem;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  height: 50px;
  border: 1px solid #ccc;
  flex-grow: 1;
}

.col:nth-child(1) {
  order: 1;
  flex-basis: calc(10% - 2px);
}

.col:nth-child(2) {
  order: 2;
  flex-basis: calc(80% - 2px);
}

.col:nth-child(3) {
  order: 4;
  flex-basis: calc(100% - 2px);
}

.col:nth-child(4) {
  order: 3;
  flex-basis: calc(10% - 2px);
}

<div class="rowblock">
  <div class="col">10% Width</div>
  <div class="col">80% Width</div>
  <div class="col">100% on Next Row</div>
  <div class="col">10%</div>
</div>

試試這個:

.rowblock {
  display: flex;
  flex-wrap: wrap;
}

.col {
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid black;
  flex-grow: 1;
}

.col:nth-child(1) {
  order: 1;
}

.col:nth-child(2) {
  order: 2;
}

.col:nth-child(3) {
  flex-basis: 100%;
  width: 100%;
  order: 4;
}

.col:nth-child(4) {
  flex-basis: 10%;
  order: 3;
}

<div class="rowblock">
  <div class="col">10% Width</div>
  <div class="col">80% Width</div>
  <div class="col">100% on Next Row</div>
  <div class="col">10%</div>
</div>