Я пробовал несколько методов для создания композиции, которая позволяет изображению смещаться из положения справа на странице на настольном компьютере в положение, в котором изображение занимает верхнюю позицию над несколькими элементами div. Я использую плавающий код CSS3, но это не работает в теме «двадцать двадцать» или устарело.
.one
{
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.two {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.child {
width: 50%;
}
.container {
background-color: orange;
}
@media screen and (min-width: 1024px) {
.one {
flex-direction: row-reverse;
}
.two {
flex-direction: row-reverse;
}
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<h1>My Heading</h1>
<div class="one child"> 1st set of paragraphs.</div>
<div class="two child"><img src="//whoweare.jpg" alt=""></img>.</div>
<div class="three child"> 2nd set of paragraphs.</div>
<div class="four child"> 3rd set of paragraphs.</div>
</div>
</body>
</html>
Изображение слева показывает, как оно должно выглядеть на настольном компьютере. На изображении справа показано, как должно выглядеть мобильное устройство на мобильном устройстве.
