Перестройка содержимого div внутри адаптивного макета сетки ⇐ CSS

[Anonymous]

У меня есть эта сетка карточек. Под карточками есть изображение и текст. Когда ширина браузера уменьшается до 1000 пикселей, карточки переходят в сложенный формат и растягиваются на 100 % ширины экрана. Изображение должно переместиться в левую часть текста. Что я не могу понять правильно, так это выравнивание текста по правой стороне изображения, вот так:


На это:

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

#main {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.card {
width: 290px;
border: 1px solid #f2f0f0;
background-color: yellow;
}

.card-content {
background-color: yellow;
padding: 10px;
}

.card-image {
height: 290px;
}

@media (max-width: 1000px) {
.card {
width: 100%;
}
.card-image {
float: left;
}
.card-content {
float: left;
}
}

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

[img]https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png[/img]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sagittis eleifend. Morbi nec neque cursus, porta nulla nec, lacinia est. Integer vehicula nibh mauris, ut sollicitudin eros efficitur et. Proin eget auctor nisl. Maecenas enim libero, tristique a ornare et, lobortis ut dui. Donec eu mi erat.




[img]https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png[/img]

Lorem ipsum

Подробнее здесь: https://stackoverflow.com/questions/791 ... rid-layout