Как установить изображение справа, которое опускается вниз при открытии на экране мобильного телефона? ⇐ Html

[Anonymous]

Я создал страницу «О нас», на которой я хочу, чтобы в правой части страницы отображалось изображение, которое при просмотре на телефоне опускается в нижнюю часть экрана.
Вот файл JS и CSS компонента React, который я создаю.
aboutUS.js

Код: Выделить всё

import './AboutUs.css'
import TeamCard from '../../components/TeamCard'

export default function AboutUs() {
const members = [
{ name: 'Bhavesh', link: 'https://developer.mozilla.org/en-US/', imageLink: 'https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg' },
{ name: 'Bhavesh', link: 'https://developer.mozilla.org/en-US/', imageLink: 'https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg' }
]

return (


About Us
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?

{members.map((member, index) => )}

[img]https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg[/img]

)
}

ОUS.css

Код: Выделить всё

.about-us-div{
color: white;
}
.content {
max-width: 600px;
margin: 30px 80px 60px;
}
.cc-cards{
display: flex;
flex-wrap: wrap;
margin-left: 60px;
margin-top: -20px;
}

@media(max-width: 710px){
.cc-cards{
justify-content: center;
padding-bottom: 30px;
}
}

Изображение должно располагаться в правом пустом месте при просмотре на большом экране, а внизу — в случае экрана телефона.
Вот пример с непозиционированным изображением.
Я пробовал использовать flex для родительского элемента div, но все равно не получил того, что хотел.>

Подробнее здесь: https://stackoverflow.com/questions/754 ... bile-scree