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, 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)  {
.photo{
    width: calc((100% / 1200)* 515);
   }
}