I come across difficulity with responsive layout in css when @media (){} is used

Question

Please do me a favor! I have a problem with CSS display property. What happen is that I loaded the data from the external server by using fetch() method and rendering it on my web page. When I do this, I create a "div" element called "content-container" by using document.createElement("div");. Then I append two <p> paragraph element and 1 anchor tag to the content-container div as follow:

function insertData(article){
   let dataContainer = document.querySelector(".data-container");
   let header = document.createElement("h4");
   let image = document.createElement("img");
   image.src = article.image;
   image.classList.add("image");
   header.innerText = article.title;
   let description = document.createElement("p");
   description.innerText = article.description;
   description.classList.add("description");
   let content = document.createElement("p");
   content.innerText = article.content;
   let details_news = document.createElement("a");
   details_news.href = article.url;
   details_news.innerText = "Read More";
   let content_container = document.createElement("div");
   content_container.appendChild(image);
   content_container.appendChild(description);
   content_container.appendChild(content);
   content_container.appendChild(details_news);
   content_container.classList.add("content-container");
   dataContainer.appendChild(header);
   dataContainer.appendChild(content_container);
}

Then, I did the css like this:

.content-container {
   display: inline-block;
}

the result is as I expected like this;

That is fine for laptop/desktop screen size. But When I try to get a responsive design for smaller screen sizes, I used

@media (max-width:800px) {
   .content-container {
      display: inline;
   }
}

BUT the result is NOT what I expected. I want the text to wrap the photo. The result is as follows instead.

I've also tried

.content-container {
   display: flex;
   flex-direction: row;
} 
p {
   display: inline;
}

but I didn't get the expected result.

So, can you please direct me to what should I do to get the text to wrap the photo?

Thank you very much

Aung

Answer 1

Maybe you should simply float the image to the left and add some margin:

.content-container img {
    float: left;
    margin: 0 10px 10px 0;
}