Trying to show an image and text side by side, I'm using the following code:
div.out {
background-color: silver;
border: 1px solid black;
padding: 10px;
display: flex;
}
div.right {
order: 1;
background-color: white;
border: 1px solid black;
padding: 10px;
margin-left: 10px;
}<div class="out">
<img src="https://i.sstatic.net/asXsj.jpg" width="40%" height="60%">
<div class="right">
A rose is a woody perennial flowering plant of the genus Rosa, in the family Rosaceae, or the flower it bears. There are over a hundred species and thousands of cultivars. They form a group of plants that can be erect shrubs, climbing or trailing with
stems that are often armed with sharp prickles. Flowers vary in size and shape and are usually large and showy, in colours ranging from white through yellows and reds. Most species are native to Asia, with smaller numbers native to Europe, North America,
and northwestern Africa. Species, cultivars and hybrids are all widely grown for their beauty and often are fragrant. Roses have acquired cultural significance in many societies. Rose plants range in size from compact, miniature roses, to climbers
that can reach seven meters in height. Different species hybridize easily, and this has been used in the development of the wide range of garden roses.
</div>
</div>When resizing the window horizontally, both the image and text adjust accordingly. However, I want to implement one additional feature. If the image's size is reduced below, say 250x250 pixels, I'd like the text to move below it instead of shrinking further. For instance:
https://i.sstatic.net/cSzLu.png
Is there a way to achieve this? Thank you