Позиционировать изображение с помощью медиа-запросов

Question

У меня есть изображение, которое всплывает прямо на весь экран и находится ниже основного контента. Однако на мобильном устройстве я хочу, чтобы изображение было выше содержимого, а не ниже. Примите во внимание, что в моем HTML изображение указано ниже основного содержания. Любые предложения будут удивительными.

Html Код

<div class="wrapper">
<div class="main">
Main stuff 
</div>
<img src="image.jpg>
<div>

Answer 1

Вы можете использовать «display: flex» для родительского div, который оборачивает ваше изображение и ваш текст. И свойство «заказ» для ваших дочерних элементов. Если вы хотите изменить положение элемента, вы можете изменить порядок в зависимости от медиа-запросов.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items