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.
You should add
col-sm-6
andcol-xs-6
to handle small screen in bootstrap then grid system then overwrite thefloat:left
ofcol-md-*
that is in bootsrap class using.container .right{float:right}
See code snippet