Break line after IMG with CSS

Question

I’m making the mobile version of a website, but I can’t force a line break after an image that sits inside a modal.

This is the stretch that matters in the modal:

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;
        </button>
        <h4 class="modal-title">Açougue</h4>
</div>
<div class="row modal-conteudo">
    <div class="modal-body">

        <p>
            <img class="img-modal" src="view/img/acougue.png" align="left" style="margin-right: 10px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur justo tellus, rutrum lobortis nibh placerat ut. Etiam magna lorem, imperdiet sit amet felis nec, dictum eleifend felis. Donec vel molestie dui. Maecenas nulla eros, porta id nulla eu, imperdiet ullamcorper purus. Pellentesque commodo, massa vitae bibendum eleifend, libero turpis dapibus elit, eu auctor nisl dui rhoncus nibh. Nam vulputate sem nisi, non eleifend justo fringilla sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur tincidunt lectus nisl, quis semper sem fermentum sed. Nulla a mi vehicula, sagittis nulla ac, venenatis erat. Maecenas tristique nibh eget dignissim malesuada.
    </p>
  </div>
</div>

Basically I need that after the tag <img> css breaks the line, but I can’t use <br> because on the desktop the line will not break, only when the media query is @media(max-width: 1080px)

Answer 1

I made using flex and changing the order of row for column, so there’s one item per column. Then I used the align-self to center the image.

See the result. (vc need to test on a screen smaller than the Snippet here from Stackoverflow ok)

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<style>
    @media only screen and (max-width: 1080px) {
        p {
            display: flex;
            flex-direction: column;
        }
        }
        img {
            width: 200px;
            align-self: center;
        }
    }
</style>

    
    
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;
            </button>
            <h4 class="modal-title">Açougue</h4>
    </div>
    <div class="row modal-conteudo">
        <div class="modal-body">

            <p>
                <img class="img-modal" src="http://placecage.com/200/200" align="left" style="margin-right: 10px;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur justo tellus, rutrum lobortis nibh placerat ut. Etiam magna lorem, imperdiet sit amet felis nec, dictum eleifend felis. Donec vel molestie dui. Maecenas nulla eros, porta id nulla eu, imperdiet ullamcorper purus. Pellentesque commodo, massa vitae bibendum eleifend, libero turpis dapibus elit, eu auctor nisl dui rhoncus nibh. Nam vulputate sem nisi, non eleifend justo fringilla sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur tincidunt lectus nisl, quis semper sem fermentum sed. Nulla a mi vehicula, sagittis nulla ac, venenatis erat. Maecenas tristique nibh eget dignissim malesuada.
        </p>
      </div>
    </div>
  </div>

OBS: If you’re like Bootstrap 4 it’s even better because it already has Flex Grid and all Flex classes are native.

Answer 2

It doesn’t break because it has the align="left". My suggestion is: remove align="left", adds the image inside a div with a class with float:left and when it is less than "such", just remove the left float:

@media screen and (min-width:765px){
  .float-left-lg{
    float:left;
  }
}

<link rel="stylesheet" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">       
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;
        </button>
        <h4 class="modal-title">Açougue</h4>
</div>
<div class="row modal-conteudo">
    <div class="modal-body">
            <div class="float-left-lg"><img class="img-modal" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="margin-right: 10px;"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur justo tellus, rutrum lobortis nibh placerat ut. Etiam magna lorem, imperdiet sit amet felis nec, dictum eleifend felis. Donec vel molestie dui. Maecenas nulla eros, porta id nulla eu, imperdiet ullamcorper purus. Pellentesque commodo, massa vitae bibendum eleifend, libero turpis dapibus elit, eu auctor nisl dui rhoncus nibh. Nam vulputate sem nisi, non eleifend justo fringilla sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur tincidunt lectus nisl, quis semper sem fermentum sed. Nulla a mi vehicula, sagittis nulla ac, venenatis erat. Maecenas tristique nibh eget dignissim malesuada.
    </p>
  </div>
</div>

Answer 3

An alternative is to put the text inside another tag <p>:

<div class="modal-body">
    <p>
        <img class="img-modal" src="view/img/acougue.png" align="left" style="margin-right: 10px;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur justo tellus, rutrum lobortis nibh placerat ut. Etiam magna lorem, imperdiet sit amet felis nec, dictum eleifend felis. Donec vel molestie dui. Maecenas nulla eros, porta id nulla eu, imperdiet ullamcorper purus. Pellentesque commodo, massa vitae bibendum eleifend, libero turpis dapibus elit, eu auctor nisl dui rhoncus nibh. Nam vulputate sem nisi, non eleifend justo fringilla sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur tincidunt lectus nisl, quis semper sem fermentum sed. Nulla a mi vehicula, sagittis nulla ac, venenatis erat. Maecenas tristique nibh eget dignissim malesuada.
        </p>
    </p>
</div>