多虧了flexbox，基于這個代碼，我希望col-1、col-3和col-5在右邊的一列中上下放置，col-2和col-4上下放置。在左欄的其他下方。

<div class="row">
    <div class="col-1">TEXTE 1</div>
    <div class="col-2">VIDEO 1</div>
    <div class="col-3">TEXTE 2</div>
    <div class="col-4">VIDEO 2</div>
    <div class="col-5">TEXTE 3</div>
</div>

可能嗎？

想要的結果:文本在左邊，視頻在右邊。 我試過這個CSS，但是視頻在文本下面。列不起作用。

section.cta-video .row{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    section.cta-video .row .col-1, section.cta-video .row .col-3, section.cta-video .row .col-5 {
        order: 1;
        flex-basis: 50%;
    }

    section.cta-video .row .col-2, section.cta-video .row .col-4 {
        order: 2;
        flex-basis: 50%;
    }

有必要是柔性布局嗎？

使用grid可以輕松實現這一點。

grid-template-columns: 1fr 1fr將其轉換為兩列布局。

然后，您可以使用第n個子代偽選擇器選擇所有偶數子代從第一個網格列開始，所有奇數子代從第二個網格列開始:

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense; /* returns it to a normal layout */
}

.row div:nth-child(even) {
  grid-column-start: 1;
}

.row div:nth-child(odd) {
  grid-column-start: 2;
}

<div class="row">
  <div class="col-1">TEXTE 1</div>
  <div class="col-2">VIDEO 1</div>
  <div class="col-3">TEXTE 2</div>
  <div class="col-4">VIDEO 2</div>
  <div class="col-5">TEXTE 3</div>
</div>

您可以使用網格，特別是網格模板區域來解決這個問題:

這里有更多關于CSS技巧的網格模板區域的信息

.row {
  display: grid;
  grid-template-areas: "a b" "c d" "e f";
}

.col-1 { grid-area:b; }
.col-3 { grid-area:d; }
.col-5 { grid-area:f; }

<div class="row">
  <div class="col-1">TEXTE 1</div>
  <div class="col-2">VIDEO 1</div>
  <div class="col-3">TEXTE 2</div>
  <div class="col-4">VIDEO 2</div>
  <div class="col-5">TEXTE 3</div>
</div>