css-使用flexbox缩小尺寸时，图像和文本不适合

我正在尝试进行媒体查询，并且正在使用 flexbox，以便图像和文本在适合某个参数时更改大小，但我不知道该怎么做

该部分由标题和描述组成，右侧是带有动画的图像，因此它可以上下移动

.home{
    display: flex; 
    align-items: center;
    justify-content: center;
    background: url(../images/home-bg-img.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.home .image img{
    width:40vw;
    animation: float 3s linear infinite;
}

@keyframes float{
    0%, 100%{
        transform: translateY(0rem);
    }
    50%{
        transform: translateY(-3.5rem);
    }
}

.home .content h3{
    font-size: 5.5rem;
    color: #333;
    text-transform: uppercase;
}

.home .content p{
    font-size: 1.7rem;
    color: #666;
    padding:1rem 0;
} 

媒体查询只包括将图像定位在顶部，将文本定位在底部。

此外，当其低于803px时，图像应随文本一起缩小

@media(max-width:803px){
.home{
        flex-flow: column-reverse;
    }

    .home .image img{
        width:100%;
    }

    .home .content h3{
        font-size: 3.6rem;
    }

    .home .content p{
        font-size: 1.5rem;
    }
   }

适合我的flex-flow: column-reverse;作品，但文字和图像不会改变它们的大小

 

在这里我留下html

 

<section class="home" id="home">

        <div class="content">

            <h3> la mejor aplicacion movil</h3> 

            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt laudantium sit pariatur alias. Doloribus atque facilis architecto ex harum porro iste magnam ad, doloremque, obcaecati omnis nisi</p>

            <a href="#" class="btn">Descargalo Ahora</a>

        </div>

        <div class="image">

            <img src="./images/home-img.png" alt="">

        </div>

 

    </section>