flexboxのorderプロパティにて順番を変えたい

現在、コーディング練習をしている最中なのですが、htmlコードにある順番をorderを使って名前1⇒名前3⇒名前4⇒名前2に変えたいのですが、うまくいきません。
お忙しいところ恐縮ですが、是非ご教授いただければ幸いです。

html
1
2<div class="customer-flex">
3          <div class="customer-left">
4            <div class="customer-flame">
5              <div class="customer-flame-img">
6                <img src="1">
7              </div>
8              <div class="customer-flame-neme">
9                名前1
10              </div>
11              <div class="customer-flame-sentence">
12                テキスト1
13              </div>
14            </div>
15            <div class="customer-flame">
16              <div class="customer-flame-img">
17                <img src="2">
18              </div>
19              <div class="customer-flame-neme">
20                名前2
21              </div>
22              <div class="customer-flame-sentence">
23                テキスト2
24              </div>
25            </div>
26          </div>
27          <div class="customer-right">
28            <div class="customer-flame">
29              <div class="customer-flame-img">
30                <img src="3">
31              </div>
32              <div class="customer-flame-neme">
33                名前3
34              </div>
35              <div class="customer-flame-sentence">
36                テキスト3
37              </div>
38            </div>
39            <div class="customer-flame">
40              <div class="customer-flame-img">
41                <img src="4">
42              </div>
43              <div class="customer-flame-neme">
44                名前4
45              </div>
46              <div class="customer-flame-sentence">
47                テキスト4
48              </div>
49            </div>
50          </div>
51        </div>

CSS
1@media (max-width: 768px) {
2
3.customer-flex {
4  display: flex;
5  flex-direction: column;
6}
7
8.customer-flame {
9  max-width: 100%;
10  width: 100%;
11}
12
13/* 名前1 */
14.customer-left > :first-child {
15  order: 0;
16}
17
18/* 名前3 */
19.customer-right > :first-child {
20  order: 1;
21}
22
23/* 名前4 */
24.customer-left > :last-child {
25  order: 3;
26}
27
28/* 名前2 */
29.customer-right > :last-child {
30  order: 2;
31}
32
33}

行動規範の内容に同意します

回答1件

ベストアンサー

フレックスアイテムとなる要素は、フレックスボックスの直属の子要素だけです。
質問文のコードで言うと、div.customer-leftとdiv.customer-right の2つだけです。
これらの子要素はフレックスアイテムではないので、フレックス関連のcss指定は無効になります。

そもそも.customer-leftと.customer-rightでフレックスにしたいアイテムを括るのが誤りなので、この2つのタグは削除しましょう。
その上で、改めてそれぞれの .customer-flame要素にorderを付与していけば期待通りに並び替えられます。
:nth-child疑似クラスを使うと楽です。

html
1<div class="customer-flex">
2  <div class="customer-flame">
3    <div class="customer-flame-img">
4      <img src="1">
5    </div>
6    <div class="customer-flame-neme">
7      名前1
8    </div>
9    <div class="customer-flame-sentence">
10      テキスト1
11    </div>
12  </div>
13  <div class="customer-flame">
14    <div class="customer-flame-img">
15      <img src="2">
16    </div>
17    <div class="customer-flame-neme">
18      名前2
19    </div>
20    <div class="customer-flame-sentence">
21      テキスト2
22    </div>
23  </div>
24  <div class="customer-flame">
25    <div class="customer-flame-img">
26      <img src="3">
27    </div>
28    <div class="customer-flame-neme">
29      名前3
30    </div>
31    <div class="customer-flame-sentence">
32      テキスト3
33    </div>
34  </div>
35  <div class="customer-flame">
36    <div class="customer-flame-img">
37      <img src="4">
38    </div>
39    <div class="customer-flame-neme">
40      名前4
41    </div>
42    <div class="customer-flame-sentence">
43      テキスト4
44    </div>
45  </div>
46</div>

css
1@media (max-width: 768px) {
2  .customer-flex {
3    display: flex;
4    flex-direction: column;
5  }
6
7  .customer-flame {
8    max-width: 100%;
9    width: 100%;
10  }
11
12  /* 名前1 */
13  .customer-flame:first-child {
14    order: 0;
15  }
16
17  /* 名前3 */
18  .customer-flame:nth-child(3) {
19    order: 1;
20  }
21
22  /* 名前4 */
23  .customer-flame:nth-child(4) {
24    order: 2;
25  }
26
27  /* 名前2 */
28  .customer-flame:nth-child(2) {
29    order: 3;
30  }
31}