flexのorderが一部に効かない

Question

前提・実現したい事

スマホ幅の画面の時だけcontainerのネストであるcontainer2,container3,container4の並びを(1)container3(2)container4(3)container2の順番に変えたい。

発生している問題
flexのorderプロパティで順番を指定しているものの、container2だけが反映されない。
構造としては以下のようになっています。(子要素まで）

header.html

<div class="container">
<div class="container2"></div>
</div>

index.html

<div container>
<div class="container3"></div>
<div class="clear"></div>
<div class="container4"></div>
</div>

該当のソースコード

pc版

@media only screen and (min-width: 1000px) {
.container{
  width:1170px;
  margin: 0 auto;
}
.container2{
  width:250px;
  float:left;
  margin-right: 100px;
}
.container3{
  width:800px;
  float:left;
}
.container4{
    height: 125px;
text-align: center;
}

スマホ版

@media screen and (max-width: 500px) {
    * {
    float: none;
}

.container{
      width:350px;
      margin: 0 auto;
      display:flex;
      flex-direction:column;
    }
   .container3{
      width:350px;
      float:left;
      order:1;
    }
    .container4{
    height: 125px;
    text-align: center;
    order:2;
    }
    .container2{
      width:350px;
      margin-right: 100px;
      order:3;
    }
.clear{
      clear:none;
      order: 4;
    }
}

Comments

[kei344]

header.htmlとindex.htmlの関係も提示してください。同じHTML上に無い要素の並び順はそもそも変えられません。あと、CSSも提示された以外のものがあるのではないでしょうか。

[Eumenes0510]

すみません。もう少し少し要点を整理してから再度質問を上げさせていただきます。ありがとうございました。

Answer 1

前回の質問と同じ問題ですが、問題が悪化しています。

/*　　*/.container {} /* 先頭の空白が全角になってしまっている */

/*　　　*/.clear{} /* 先頭の空白が全角になってしまっている */

【HTML - flexのorderが一部に効かない｜teratail】
https://teratail.com/questions/222633#reply-326014

Comments

[kei344]

低評価をされるのはかまいませんが、どの部分に問題があるかはコメントくださいね。当回答および次回以降の回答の改善につながる可能性もあるので、よろしくおねがいします。

[Eumenes0510]

すみません。間違えて押してしまったようです。
本当に申し訳ございません。

[Eumenes0510]

あと、空白は質問に書き込むときに間違えて入れてしまったようです。
実際のコードには空白はありません。修正しました。

[kei344]

評価は同じボタンを押すことで戻すことが出来ますよ。

[Eumenes0510]

はい。押しました。

[kei344]

それでも両記事に低評価が残っているので、ほかの方が押されたのでしょう。残念ながらコメントを一言もいただけていないので、何が問題と思われたかはわかりませんので記事の更新はしません。