Use 1 markup to create 2 layouts based on breakpoint - html

Question

The snippet shows 2 examples. First is the layout for small breakpoints, where it has 4 elements in one column. The second one is the layout for big breakpoints, where it has 2 elements in one column and 2 elements in another column. And the element that has moved over from the second column is one from the middle ("second paragraph", not the first or third paragraph).
I can do it like the snippet with 2 different markups for the different breakpoints, but duplicating markup is not good. How can I do it using 1 markup and have it adjust to both layouts at the different breakpoints? I tried using grid layout but it didn't work because the top left image in the large breakpoint had extra space on the bottom because of the paragraph on the top right (they are taking up the same height because they are in the same grid row).
h2 {
margin: 0;
}
.container1 {
width: 100%
}
.container1 .column1 img {
width: 100%
}
.container2 {
display: flex;
flex-direction: col;
flex-wrap: wrap;
}
.container2 .column1 {
width: 50%;
}
.container2 .column1 img {
width: 100%
}
.container2 .column2 {
width: 50%;
}
<h1>first example</h1>
<div class="container1">
<div class="column1">
<img src="https://picsum.photos/250/100">
</div>
<div class="column2">
<h2>first paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean. Viverra
justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue interdum velit
euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
<div>
<h2>second paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean. Viverra
justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue interdum velit
euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
<div>
<h2>third paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean. Viverra
justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue interdum velit
euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
</div>
<h1>second example</h1>
<div class="container2">
<div class="column1">
<img src="https://picsum.photos/250/100">
<div>
<h2>second paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean.
Viverra justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue
interdum velit euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
</div>
<div class="column2">
<div>
<h2>first paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean.
Viverra justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue
interdum velit euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
<div>
<h2>third paragraph</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum. Id porta nibh venenatis cras sed felis eget velit. Lacus sed turpis tincidunt
id aliquet risus feugiat in ante. Pretium vulputate sapien nec sagittis aliquam. Tortor vitae purus faucibus ornare. Sed turpis tincidunt id aliquet risus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Eu turpis egestas pretium aenean.
Viverra justo nec ultrices dui. Mattis rhoncus urna neque viverra justo. Facilisi cras fermentum odio eu feugiat pretium nibh. In mollis nunc sed id semper. Eget mi proin sed libero enim sed faucibus turpis. Fringilla ut morbi tincidunt augue
interdum velit euismod in. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Sed elementum tempus egestas sed sed risus.
</div>
</div>
</div>

Answer 1

For the desktop version of it you could use grid-row to expend your rows and keep a clear markup
body {
margin: 0;
}
.img__content {
grid-row: 1 / 4;
position: relative;
height: 100%;
}
.img__content img {
position: absolute;
max-width: 100%;
height: 100%;
width: unset;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
}
.bloc:nth-child(4) {
grid-row: 3 / span 2;
}
.bloc {
grid-row: span 2;
}
<div class="grid">
<div class="img__content">
<img src="https://images.unsplash.com/photo-1619445189993-b96d083fc862?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTI0MDIyMw&ixlib=rb-1.2.1&q=85" alt="">
</div>
<div class="bloc">
<h1>Paragraph 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
</div>
<div class="bloc">
<h1>Paragraph 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
</div>
<div class="bloc">
<h1>Paragraph 3</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
</div>
<div class="bloc">
<h1>Paragraph 4</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut laudantium incidunt expedita maxime beatae earum, quaerat suscipit quos corrupti dolore rerum corporis? Illum quo, tenetur ea doloribus reprehenderit voluptas labore?</p>
</div>
</div>