How can I change the order of elements in bootstrap?

Question

Here is my code:

<div class="container">
  <div class="right col-md-4">this should be on the right side and on the top (in small screen size)</div>
  <div class="left col-md-8">this should be on the left side and on the bottom (in small screen size)</div>
</div>

<style>
.container{
  border: 1px solid;
}

.right{
  border: 1px dashed red;
}

.left{
  border: 1px dashed green;
}
</style>

DEMO

.container{
  border: 1px solid;
}

.right{
  border: 1px dashed red;
}

.left{
  border: 1px dashed green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="right col-md-4">this should be on the right side and on the top (in small screen size)</div>
  <div class="left col-md-8">this should be on the left side and on the bottom (in small screen size)</div>
</div>

As you see in the demo, the red bordered box should be one the right side (which is currently on the left side) and should be on the top in small screen size (which is in the top and correct position right now).

Anyway, how can I pull it on the right side? Noted that I don't want to use pull-right for it. because I need to make it center in small screen size.

Answer 1

You should add col-sm-6 and col-xs-6 to handle small screen in bootstrap then grid system then overwrite the float:left of col-md-* that is in bootsrap class using .container .right{float:right}

See code snippet

.container{
  border: 1px solid;
}

.container .right{
  border: 1px dashed red;
  float:right ;
}

.left{
  border: 1px dashed green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="right col-md-4 col-sm-6 col-xs-6">this should be on the right side and on the top (in small screen size)</div>
  <div class="left col-md-8 col-sm-6 col-xs-6">this should be on the left side and on the bottom (in small screen size)</div>
</div>

Answer 2

It should be:

<div class="container">
    <div class="right col-md-4 col-md-push-8">this should be on the right side and on the top (in small screen size)</div>
    <div class="left col-md-8 col-md-pull-4">this should be on the left side and on the bottom (in small screen size)</div>
</div>

Answer 3

.parent{display:flex;}.child1{order:1;}.child2{order:2;}change the order of the child elements in media query.

Answer 4

You can do this using PULL, I know you do not want to use it, but you can try it in the following way by combining it with PUSH

https://jsfiddle.net/m7vxm9cr/

.container{
  border: 1px solid;
}

.right{
  border: 1px dashed red;
}

.left{
  border: 1px dashed green;
}

<div class="container">
   <div class="right col-xs-12 col-sm-12 col-md-push-6 col-md-6">this should be on the right side and on the top (in small screen size)</div>
  <div class="left col-xs-12 col-sm-12 col-md-pull-6 col-md-6">this should be on the left side and on the bottom (in small screen size)</div>
</div>