0

a layout question for the CSS professionals here:

On big desktop screens, I want this layout:

Image left, headline and text right

Two columns:

  • Image 2️⃣ vertically centered in left column
  • Headline 1️⃣ and text 3️⃣ both on the right side column

On small mobile screens I want to switch order:

Headline, image, Text one below the other

One column with headline, image and text one below the other:

  • Headline 1️⃣ top
  • image 2️⃣ middle
  • text 3️⃣ bottom

With css flexbox this seems to be impossible as I cannot take out 2️⃣ on the big screen layout. Any ideas how to solve this with minimal code?

dash
  • 1,249
  • 3
  • 17
  • 25
  • You should have shared your code. Also if you are using bootstrap, you can easily do that with `order` utility. [Check this answer here](https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4#:~:text=Since%20Bootstrap%204%20is%20flexbox,row%20.&text=It's%20also%20possible%20to%20change,the%20flexbox%20direction%20utils...) – Vivek K. Sep 30 '22 at 09:32
  • @VivekK. Agree about the share of a [minimal reproductible example](https://stackoverflow.com/help/minimal-reproducible-example), but the link provided is not enough to answer the question – Cédric Sep 30 '22 at 10:00
  • Also, `order` is a css property, it can be usefull to solve the question using flexbox, but I wonder if a grid wouldn't be better (I'm not used to use it so I'm not sure) – Cédric Sep 30 '22 at 10:06
  • @Cédric exactly the case with me, I am used to the flexbox. – Vivek K. Sep 30 '22 at 11:38

0 Answers0