I'm relatively new to css, don't know how to make the layout work. There is a column with photo swiper to the left and a column with info to the right. The problem is that on desktop layout (@media (min-width: 992px)) the "buttons" div should be directly under the "info" as part of the right column, but on tablet layout (@media (min-width: 768px)) the buttons need to wrap and become screen-wide, being under both of the columns.Here's the html template:
<div class="wrapper"><div class="photo swiper"></div><div class="info"></div><div class="buttons"></div></div>The problem is I cannot define the height of .photo or .info classes (only their width), they must remain flexible. And I really don't want to create two separate "buttons" elements for different screen sizes. How can I make this layout?
@media (min-width: 768px) {.wrapper { display: flex; gap: 40px; align-items: flex-start;}.photo{ width: calc((100% / 1200)* 515); }}