Speaker responsiveness in Bootstrap

Question

I have two rows with two columns, the first column of the first row has an image and the second column of that row has a text. The second line has a text in the first column and an image in the second.

When responsiveness happens, you get image and text under each other and then text and image under each other.

I need that when responsiveness occurs, stay image and text one under the other.

How can I do that?

Answer 1

This is because the Bs grid uses left alignment, so it will really get image->text->text->image, but you can create a specific css class for these columns using @media{}, for example:

These are the @media used by bootstrap4

@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }

So for smaller devices you can do so:

First, define the element pai with display:flex; and flex-direction: column;, then set the column order:

@media (max-width: 768px) {//aqui você ajusta o tamanho máximo do display para ter a alteração
    .alinhamento{
        order:2;
    }
}

Simply assign the class to the desired column, and the order will be reversed.

EDIT: Of course the changes should be made according to the need of your code and the amount of elements you would like to change the order, relating your positions in the parent element.

Answer 2

With Bootstrap3 you can do using display:flex and column-reverse only for small resolutions using the @media measure of Bootstrap.

See how it looks in the example below. Have it displayed as "Full page" to see how it works!

@media (max-width: 767px) {
  .row.reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

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

<div class="row">
  <div class="col-sm-6">
    <img src="http://placecage.com/200/100" alt="">
  </div>
  <div class="col-sm-6">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, iure ab eos iste cum quam quo voluptatibus! Quae, dolor placeat?
  </div>
</div>
<div class="row reverse">
  <div class="col-sm-6">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe expedita iure nesciunt, modi voluptate corporis voluptatum sunt ducimus magni delectus.
  </div>
  <div class="col-sm-6">
    <img src="http://placecage.com/200/101" alt="">
  </div>
</div>

---

For Bootstrap 4 just you change the order of the elements in the measure @media that you want. In the case in the least official measure 577px I changed the order, because the Bootstrap 4 grid is already flex by default

See how it looks. OBS: As the measure is 577px here still appears on each other’s side, but if the screen is smaller than this will break right, just test there.

@media (max-width: 576px) {
  .col-sm-6.reverse {
    order: 2;
  }
}

 <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
 
<div class="row">
  <div class="col-sm-6">
    <img src="http://placecage.com/200/100" alt="">
  </div>
  <div class="col-sm-6">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, iure ab eos iste cum quam quo voluptatibus! Quae, dolor placeat?
  </div>
</div>
<div class="row">
  <div class="col-sm-6 reverse">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe expedita iure nesciunt, modi voluptate corporis voluptatum sunt ducimus magni delectus.
  </div>
  <div class="col-sm-6">
    <img src="http://placecage.com/200/101" alt="">
  </div>
</div>