Menü schliessen
Created: March 17th 2021
Last updated: December 10th 2021
Categories: IT Development
Author: Tim Fürer

CSS and Bootstrap: Alternating Layout with Images to normal in Mobile (solved with display:grid)

Tags:  CSS,  guide,  HTML
Donation Section: Background
Monero Badge: QR-Code
Monero Badge: Logo Icon Donate with Monero Badge: Logo Text
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

A CSS and HTML problem which you've probably already encountered before:

You have an alternating Layout which switches between "image - text" and "text - image" and you also build it like that in HTML.

Now you have to make it mobile friendly and turn it into a normal Layout - this can be a total nightmare.

You decide to give both image and text a full row in the container. That doesn't really work though because of how you build your HTML. You'll see something like: "image - text - text - image..." and so on.

There are many ways to solve this, one way would be to build the HTML twice with one structure being alternating and the other one normal and then to hide or show one based on desktop or mobile view.

But, there's also a much simpler way that utilizes CSS you can try that doesn't require any changs to your HTML: The "Display: grid" Method.

The "Display: grid" CSS Method

First, give the element (most likely a div) that contains your image and text, the "display: grid;" property when it's time to switch to mobile.

Then, give the element you desire to be at the top "grid-row: 1;".

All done!

This is how your code might look like:

@media (max-width: 992px )
{
	.alternating-container
	{
		display: grid;
	}

	.alternating-container .alternating-container-image
	{
		grid-row: 1;
	}
}