Bootstrap - change the order of element

Question

I have 2 divs both with col-md-6.

i want it to change to col-xs-12 for mobile

but the order should be:

using bootstrap, what should i do to make the box B on top of box A

Did you try using the property "order" of flexbox ? – Shruti Agarwal Oct 06 '17 at 18:38 — Shruti Agarwal, Oct 06 '17 at 18:38
Are you using Bootstrap V3 ar V4? – Satheesh Kumar Oct 08 '17 at 10:53 — Satheesh Kumar, Oct 08 '17 at 10:53

score 6 · Accepted Answer · answered Oct 06 '17 at 18:47

6

Try using "order" property of flexbox in CSS.

Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering.

Sample code to help you understand this : https://jsfiddle.net/bhyqeq5x/

In the above JS fiddle , above 700px , it is rendered as A B (normal behaviour)but below 700px , I am changing the direction of flex box to column so that it appears one below the other and changing the order of A and B as per your requirement.

@media only screen and (max-width: 700px) {  
   .container {    
     flex-direction : column;  
   }  
   .A {
     order : 2;   
   }  
   .B {
          order : 1;
    } 
}

Let me know in comments below if this doesnt help you.

answered Oct 06 '17 at 18:47

Shruti Agarwal

887
2
14
29

woah, i didn't know there's something like this before. thanks ! upvoted – KennethC Oct 06 '17 at 19:06
@KennethC : There are a lot of things that can be achieved using flexbox in CSS. Try reading https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Shruti Agarwal Oct 06 '17 at 19:14
@KennethC : If this was helpful to you, can you please mark it as accepted answer to help others in future? – Shruti Agarwal Oct 06 '17 at 19:15
I have issues with safari tho. :( – KennethC Oct 08 '17 at 02:52
What is the issue with it? Can you put a screenshot or something? – Shruti Agarwal Oct 08 '17 at 16:16

score 1 · Answer 2 · answered Oct 06 '17 at 18:27

You can order the elements using a flex container.

The outer div is set to "display: flex;" and the inside elements get given an order. By giving element B an order of 1, and element A an order 2. Element B will be placed before A even though A is first in the code.

Here's a sample bit of code I wrote;

#flex-container{
    display: -webkit-flex; /* Safari */
    display: flex;
}

#a, #b{
  height: 200px;
  width: 200px;
}

#a{
  order: 2;
  background-color:#000;
}
#b{
  order: 1;
  background-color:#575757;
}
<div id="flex-container">
  <div id="a"></div>

  <div id="b"></div>
</div>

w3 schools also have a great demo of flex ordering in action here https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order

score 1 · Answer 3 · answered Oct 06 '17 at 18:48

If you are using Bootstrap V4, simply use flex-direction: row-reverse; in the media query.

Or

If you are using Bootstrap V3 simply use float: right; in the media query for the col-* and place the HTML as given below

 <div class="col-xs-12 col-sm-6">B</div>
  <div class="col-xs-12 col-sm-6">A</div>

Bootstrap - change the order of element

3 Answers3

Linked