Change content position dynamically with css

Question

I have two divs,

<div class="col-md-6"> First Content </div>
<div class="col-md-6"> Second Content </div>

When it is full screen, I want to show the "First content" first and then the "Second Content", but when the screen size is small, I want to show the "Second Content" first and below it the "First Content".

Is there a way? I want to implement this with raw css or bootstrap.

Does this answer your question? [https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4](https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4) — Rob Moll, Jun 26 '20 at 12:23

score 1 · Accepted Answer · answered Jun 26 '20 at 13:19

1

I think the answer you are looking for is using flex-wrap: wrap-reverse. Something like this:

#wrapper{
display: flex;
flex-wrap: wrap;
text-align:center;
}

.first, .second{
width: 400px;
margin: auto;
height:400px;
}

.first{
background: red;
}

.second{
background:yellow;
}

@media only screen and (max-width:500px){
  #wrapper{
  flex-wrap:wrap-reverse;
}
}

<div id="wrapper">
<div class="first">First</div>
<div class="second">Second</div>
</div>

answered Jun 26 '20 at 13:19

Adelina Lipşa

30
14

This is not what I am looking for. When the screen is small, I want the second item to be on the top of first item. – Yeasir Arafat Jun 26 '20 at 14:09
that is exactly what the code does...resize this window and test it. – Adelina Lipşa Jun 26 '20 at 15:07
go to the device toolbar in your browser and enter mobile mode to test the code. – Adelina Lipşa Jun 26 '20 at 15:11
I didn't make ta screen small enough – Yeasir Arafat Jun 26 '20 at 17:41

Change content position dynamically with css

1 Answers1