I am trying to display an image and a text to the right of it. I use the 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.stack.imgur.com/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 I resize the window horizontally then both the image and the text resize accordingly. Which is fine but I want to add one more fact. If the image is to be resized below let's say 250x250 pixels then it should not drop below 250x250 but the text instead to appear below of it. Example:
How can I do this? Thanks