flex-direction: column-reverse;で逆順にならない

前提・実現したいこと

横方向に並べている2つのボックスをレスポンシブ化して、タブレットの時は縦方向に表示させ、かつ順番を入れ替えたい。
(今回でいうと、.right-boxを上、.left-boxを下に配置したい)

発生している問題・エラーメッセージ

エラーは出ていませんしコードもきちんと読まれていますが、逆順にだけなりません。

該当のソースコード

HTML
1<div class="content">
2            <div class="left-box">
3                <h2>AAA</h2>
4                <p>aaaaaaaaaaaaa</p>
5                <a href="#">aaa</a>
6            </div>
7            <div class="right-box">
8                <img src="images/aaa.png" alt="">
9            </div>
10</div>

CSS
1.content {
2    overflow: hidden;
3    display: flex;
4    justify-content: space-around;
5}
6.left-box {
7    float: left;
8    width: 450px;
9    margin: 50px;
10}
11
12.right-box {
13    float: left;
14    width: 450px;
15    margin: 50px;
16}
17
18@media screen and (max-width: 479px) {
19    .white {
20        display: flex;
21        flex-direction: column-reverse;
22    }
23}

試したこと

@media screen and (max-width: 479px)の中に
.left-box{
order:2;
}
.right-box{
order:1;
}
などを足してみたりもしましたが、逆順にはなりません。

普通にできるはずなのですがなぜかできなくて完全に手詰まりです。よろしくお願いいたします。

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

回答1件

セレクターの指定ミスでは？
いま.whiteになっているところを.contentにすればイケるはず。

CSS
1@media screen and (max-width: 479px) {
2    .content {
3        display: flex;
4        flex-direction: column-reverse;
5    }
6}

あ、あとfloatとかも解除したりコンテンツの幅とかも調整してあげてくださいね！はみ出ちゃうので！

CSS
1@media screen and (max-width: 479px) {
2    .content {
3        display: flex;
4        flex-direction: column-reverse;
5        padding: 0 20px;
6    }
7    .left-box, .right-box {
8        float: none;
9        width: 100%;
10        margin: 0;
11    }
12}