Bootstrap: behaviour similar to float possible?

Question

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 had a look at those two articles, but they did not quite takle my problem:

Update: Found this question that covers a similar case. But the ticked solution proposes to float. Is that the only way?

score 2 · Answer 1 · answered Apr 30 '15 at 12:24

2

<div class="container">
    <div class="row">
    <div class="col-sm-4 col-md-push-4">Title</div>

      <div class="row">
        <div class="col-sm-12 col-md-4 col-md-pull-4">Img</div>
        <div class="col-sm-12 col-md-4 col-md-push-4">
          Content  <br/>
          content
        </div>
      </div>
  </div>
</div>

This should do the trick. Here's a bootply http://www.bootply.com/xTBHlj60ws

answered Apr 30 '15 at 12:24

Joe Swindell

684
1
7
18

1

You get my +1 for being the only answer to use push/pull classes. – DavidG Apr 30 '15 at 12:43
1

Your solution looks great. Thanks for being so fast. But it takes up only 8 columns. I can't get it to work with 12 columns (working on it right now). And it does not align. – Teetrinker Apr 30 '15 at 13:12

score 0 · Answer 2 · answered Apr 30 '15 at 12:14

0

If you don't mind extra html

<div class="container">
    <div class="row">
        <div class="col-md-4 hidden-sm hidden-xs">
            img
        </div>
        <div class="col-sm-12 col-md-8">
            <div class="row">
                <div class="col-sm-12">
                    title
                </div>
                <div class="col-sm-12  hidden-md hidden-lg">
                    img
                </div>
                <div class="col-sm-12">
                    content
                    <br />content
                </div>
            </div>
        </div>
    </div>
</div>

answered Apr 30 '15 at 12:14

potatopeelings

40,709
7
95
119

It was more of the principle of can it be done without floats :-). Anyhow realistically I think you'd definitely want different images for a mobile vs. desktop if you want the above layout to look pretty. Also, same image same page - the browser just reuses the image. You should see only 1 call to the server in Developer tools. Check out http://stackoverflow.com/questions/5240897/loading-the-same-image-repeatedly – potatopeelings Apr 30 '15 at 12:48

score 0 · Answer 3 · edited May 23 '17 at 10:27

I played around with the answer of Joe Swindell. It does not align with the bootstrap grid. And it only uses 8 instead of 12 columns.

Here is a simplified version of his code that works better.

<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</div>
        <div class="col-md-4 col-md-push-4">Content</div>
    </div>
</div>

But it is not perfect. I wrote a second question for that: Bootstrap: Why does this column not float and how can I change that?

Bootstrap: behaviour similar to float possible?

3 Answers3

Linked