Images after text in the same line in Bootstrap

Question

How to make to look these images:

to be in the same line, like in this example?

Here's how looks my code (Bootstrap) for the one column:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <h2>We're from <br /> here</h2>
        <p>We do almost all of our work with US-based companies. More
            importantly, we have tons of personal work experience in the US. Most
            importantly, some of us regularly reside in the US. You can forget about culture clash and long-distance phone
            calls. We give you an onshore throat
            to choke.</p>
        <img src="img/city.jpg" class="img-responsive" alt="city" />
    </div>
</div>

It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. — Paulie_D, Jan 18 '16 at 15:41
However, you should start here - http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height?rq=1 — Paulie_D, Jan 18 '16 at 15:42
@Paulie_D, yeah I was on the page you linked, but it doesn't work with me. — MuchaZ, Jan 18 '16 at 15:50
@scaisEdge, here: http://s.arciemowicz.pl/18-01-16-16-50-37.png I tried to adapt the code from the Paulie's link and I failed. — MuchaZ, Jan 18 '16 at 15:50
@scaisEdge, yep. I tried to make 2 rows and put the text into the first one, the images into the second but then it doesn't fit with mobile screens. (all images are under the texts) — MuchaZ, Jan 18 '16 at 15:54
I have posted an answer i hope this could be useful be sure your p element have the same height.. — ScaisEdge, Jan 18 '16 at 15:57

score 2 · Answer 1 · edited May 23 '17 at 12:23

Essentially, you have to make the columns all the same height (flexbox can do that) and then push the image (they are all the same height right?) to the bottom of the div....and flexbox has methods for that too.

.row {
  display: flex;
}
.row > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 1px solid grey;
}
.row > div img {
  margin-top: auto;
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3">
    <h2>We're from here</h2>
    <p>We do almost all of our work with US-based companies. More importantly, we have tons of personal work experience in the US. Most importantly, some of us regularly reside in the US. You can forget about culture clash and long-distance phone calls.
      We give you an onshore throat to choke.</p>
    <img src="http://lorempixel.com/image_output/food-h-c-200-400-6.jpg" class="img-responsive" alt="city" />
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    <h2>We're from <br /> here</h2>
    <p>Lorem ipsum dolor sit.</p>
    <img src="http://lorempixel.com/image_output/food-h-c-200-400-6.jpg" class="img-responsive" alt="city" />
  </div>
</div>

It works for the big screens, on mobiles it's destroying everything: http://s.arciemowicz.pl/18-01-16-17-04-03.png — MuchaZ, Jan 18 '16 at 16:04
It's not a single stop solution...you're supposed to adapt it to suit your particu;ar situation....you probably need to set the flex-container to wrap, that's all. — Paulie_D, Jan 18 '16 at 16:07

score 1 · Answer 2 · answered Jan 18 '16 at 15:57

Try with a proper min-height for p element

    .my_p {
        min-height: 400px; 
    } 

    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <h2>We are from <br /> here</h2>
            <p class="my_p">We do almost all of our work with US-based companies. More
                importantly, we have tons of personal work experience in the US. Most
                importantly, some of us regularly reside in the US. You can forget about culture clash and long-distance phone
                calls. We give you an onshore throat
                to choke.</p>
            <img src="img/city.jpg" class="img-responsive" alt="city" />
        </div>
    </div>

Images after text in the same line in Bootstrap

2 Answers2