vertical centering elements in specific/different order for desktop/mobile without js? [duplicate]

Question

Is it possible to change the position of elements (depending on media queries) and still use vertical-centering? Back in the past this wasn't possible with pure css but how about now? I thought about a combination of flexboxes with css grids but I can't get it to work. Is it still not possible?

This question is no duplicate because I asked about vertical centering elements on desktop view that can change the order in mobile. There are 3 different elements at minimum (can even be more). The linked answer doesn't answer this. It just shows how to order elements for different views but ignores the vertical alignment.

Here a picture of the view I want to achieve:

Desktop view:

Mobile view:

And here the code:

<div class="wrap">
    <h2>Headline</h2>
    <img src="..." />
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>

Answer 1

You can achieve the same using display: grid

.list-tile {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20px;
  grid-template-areas: "image image header" "image image content";
  grid-gap: 1em;
}

h2 {
  grid-area: header;
}

img {
  grid-area: image;
}

p {
  grid-area: content;
}

@media (max-width:767px) {
  .list-tile {
    grid-template-areas: "header" "image" "content";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
}

<div class="list-tile">
  <img src="https://via.placeholder.com/400x200" alt="image" />
  <h2>Heading2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies odio eu elit pharetra, blandit elementum nunc tristique. Curabitur quis ullamcorper felis.</p>
</div>