Flexbox and boostrap

Hello and congratulations on your solution I like it !

Concerning your questions.

-For you media I would change the breakpoint of max-width:375px to something bigger, because right now when the screen is 376px wide it's changing to the desktop image, and the device is still very small and hasn't changed really.

-You were close, you had your <picture> element already. You can in fact give multiple sources for different media screen sized in a <picture> tag. You need to add a second <source>, for something like this:

<picture>
  <source media="(max-width:768px)" srcset="images/image-mobile.jpg />
  <source media="(min-width:769px)" srcset="..."/>
  <img src="images/image-dekstop.jpg" alt="...">
</picture>

more info about <picture>

Good luck 🙂

Hello, i solve that using background-image. in the @media code block just change the url of the background-image. If you want to use img tag on your html you have to use two, one with display: none (remains hidden) and other with display: inline-block. Then in the @media code block switch the values to display the correct image. Sorry for my english, I hope I could help you. ;)

Hello ! For media queries , you could just use the 'background' property and then set the url("/img/...yourImg) for changing the desktop image to mobile img that you have included in the files downloaded previously from frontendmentor.io .