flexのorderが一部に効かない

Question

前提・実現したい事

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

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

<div class="container">
<div class="container2"></div>
<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]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[Eumenes0510]

ご指摘ありがとうございます。修正しました！

Answer 1

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

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

Comments

[kei344]

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