Responsive bootstrap does not break for bass line

Navigation
0

I have the following code: 

    <div class="welcome-content row">
      <figure class="col-xs-12 col-sm-12 col-md-6">
        <%= image_tag('feed/welcome2016.jpg') %>
      </figure>
      <p class="welcome-text col-xs-12 col-sm-12 col-md-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales placerat vestibulum. Vivamus in pretium lorem. Mauris rutrum tempus neque sit amet aliquam. Ut vel mi pulvinar, condimentum nisl non, lobortis purus. Praesent ullamcorper purus dui, a feugiat lacus vestibulum vel. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. mentum nisl non, lobortis purus. Praesent ullamcorper purus dui, a feugiat lacus vestibulum vel. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. el. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. el. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero.
      </p>
    </div>

But when I go down the screen size, it does not break the block of text to the bottom line, getting the image above and the text below.

Maybe it's something easy but I can not see it: S

    
asked by anonymous 28.12.2015 / 23:11

2 answers

2

I imagine the problem is that I'm putting it in a p tag, I've made a small change and see if it works out. 

<div class="welcome-content row">
    <figure class="col-xs-12 col-sm-12 col-md-6">
        <img src="http://lorempixel.com/400/200/sports/5/"></figure><divclass="welcome-text col-xs-12 col-sm-12 col-md-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales placerat vestibulum. Vivamus in pretium lorem. Mauris rutrum tempus neque sit amet aliquam. Ut vel mi pulvinar, condimentum nisl non, lobortis purus. Praesent ullamcorper purus dui, a feugiat lacus vestibulum vel. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. mentum nisl non, lobortis purus. Praesent ullamcorper purus dui, a feugiat lacus vestibulum vel. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. el. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. el. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero.
    </div>
</div>

continue running in jsfiddle the result

    
28.12.2015 / 23:32
1

Thanks to the help of Marcelo and Samir I fired in the code and realized that I was using the code below to centralize the object vertically and this was interfering with the element and causing the problem I mentioned above, I removed those styles and everything went well. 

  .welcome-content
  {
    display: flex;
    align-items: center;
  }

Thanks to everyone

    
29.12.2015 / 01:34
Display report separated by date groups How to use sprintf to mount a SQL query? [closed]