How to undo wrapping of flex items to the next line?

Question

css

How to cancel the transfer of a flex element to another line so that it looks at 768px like this


I get it, although at a slightly higher resolution everything is fine, but reaching 768 it is transferred


Code https://jsfiddle.net/Le9unvc2/

Website tempessj.beget .tech

Answer 1

<div class="col img"> <div class="col desc">wrap in div

Answer 2

For flex items, this behavior may be due to the fact that the size of the container does not fit all the elements, so that they stand in one row.
I advise you to open the developer tools in the browser and through the selection of the page element, when the screen size changes, see the highlighted margins, paddings and the very width of the elements.
Plus, if you have it , it means that if all the elements nested in the container do not fit into it in one row, those elements that do not fit into it will be moved to the next line. flex-wrap: wrap;