I need to rearrange my bootstrap columns.
HTML
<div class="row equal">
<div class="panel col-lg-7 col-md-7 col-sm-6 col-xs-push-12 " id="PanelFirst">
Insert content here...
</div>
<div class="panel col-lg-5 col-md-5 col-sm-6 col-xs-pull-12 " id="PanelSecond">
Insert Content here....
</div>
I have experimented with col-xs-pull and col-xs-push classes. I also tried pull-left and pull-right classes.
Additionally, I attempted to use media queries for smaller screens.
@media only screen and (max-width:480px)
{
#PanelFirst {
float: right;
}
#PanelSecond {
float: left;
}
}
Using col-xs-pull-12 and col-xs-push-12 classes affects larger screens as well. I aim to shift the entire PanelSecond above and PanelFirst below specifically for xs size screens.
https://i.sstatic.net/WjDE2.png The layout is satisfactory for large screens, but on small screens, the login area should be at the top. However, it currently looks like this.