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 text. The second line has text in the first column and an image in the second.
When responsiveness happens, there is image and text one underneath the other and then text and image one underneath the other.
I need that when responsiveness occurs, get picture and text one underneath the other.
How can I do this?
With Bootstrap3 you can do using display:flex and column-reverse only for small resolutions using the @media Bootstrap measure.
See the example below.
@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 you only need to change the order of the elements to the extent% w_that you want.
See how it goes. As the measure is 577px here still appears side by side, but if the screen is smaller then 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> This happens because the bs grid uses left alignment, so it will actually stay 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) { ... }
Then for smaller devices you can do this:
First, set 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;
}
}
Just assign the class the desired column, and the order will be reversed.
EDIT: Of course, 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 placements to the parent element.