2

I built a website with bootstrap 3, it has a news section where each news article should look like the following:

mobile-first:

------------
|  Title   |
------------
------------
|  Img     |
------------
------------
|  Content |
|  Content |
------------

on bigger screens:

---------------------------
|  Img  |  Title          |
|       |------------------
|-------|  Content        |
|       |  Content        |
---------------------------

I don't want the content to float around the image, it should stay in its column, that is why I seek to solve this with bootstrap.

I already asked a question about this - and found a solution - which I now see is not perfect. question.

If I use the following code:

<div class="container"> 
    <div class="row">
        <div class="col-md-8 col-md-push-4">Title</div>         
        <div class="col-md-4 col-md-pull-8">Img<br>IMg<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br></div>
        <div class="col-md-4 col-md-push-4">Content<br>content<br>content<br>content<br>content<br>content</div>
    </div>
</div>

I get:

---------------------------
|  Img  |  Title          |
|       |------------------
|-------| 
|-------|------------------
|       |  Content        |
|       |  Content        |
---------------------------

While the img-columns floats as it should, the content column does not. Why is that?

I added a code snippet for that:

[class*="col"]{
  border: 1px solid black;
  }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


 <div class="container"> 
  <div class="row">
   <div class="col-sm-8 col-sm-push-4">Title</div>   
   <div class="col-sm-4 col-sm-pull-8">Img<br>Img<br>Img<br>Img<br>Img<br>Img<br>Img<br>Img<br>Img<br></div>
   <div class="col-sm-4 col-sm-push-4">Content<br>content<br>content<br>content<br>content<br>content</div>
  </div>
 </div>
Community
  • 1
  • 1
Teetrinker
  • 850
  • 1
  • 15
  • 30

1 Answers1

3

It's because your changing the col order with push and pull. Since Bootstrap uses float:left the taller column on the right will wrap. One way to fix it is to use pull-right on the content column.

<div class="container"> 
    <div class="row">
        <div class="col-md-8 col-md-push-4">Title</div>         
        <div class="col-md-4 col-md-pull-8 pull-right">Img<br>IMg<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br>sdf<br></div>
        <div class="col-md-4 col-md-push-4">Content<br>content<br>content<br>content<br>content<br>content</div>
    </div>
</div>

http://www.codeply.com/go/jcXWNcbszw

EDIT:

To prevent the pull-right from affecting the float on small screens, you can use a CSS media query and custom class (pull-right-md) like this..

@media (min-width: 991px) {
    .pull-right-md {
        float:right;
    }
}

I updated the Codeply accordingly: http://codeply.com/go/jcXWNcbszw

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624