Side panel...">
Geek Answers Handbook

Switching bootstrap columns to mobile view

Consider the following:

<div class="row"> <div id="side_panel" class="col-md-3 cold-xs-12"> Side panel </div> <div id="mainContentRight" class="col-md-9 cold-xs-12 "> Main content area </div> </div>

Is there a way to switch the order of these columns for mobile viewing so that the main content appears in front of the sidebar?

+4
source share
2 answers

Bootstrap is the first platform for mobile devices, so change your brand before you want it to look on a full xs-12 mobile phone. Then you can use push and pull to move the column. Here is the link to the doc .

 <div class="row"> <div id="mainContentRight" class="col-md-9 col-md-push-3 cold-xs-12 "> Main content area </div> <div id="side_panel" class="col-md-3 col-md-pull-9 cold-xs-12"> Side panel </div> </div>
+3
source

Unfortunately, you cannot change the order of using push and pull for 12 column classes, i.e. col-xs-12 . Either change the layout to be able to include a 12-column grid or use a simple solution using flexbox below:

 @media (max-width: 768px) { .reorder { display: flex; flex-direction: column; } #side_panel { order: 2; } } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="row reorder"> <div id="side_panel" class="col-md-3 cold-xs-12"> Side panel </div> <div id="mainContentRight" class="col-md-9 cold-xs-12"> Main content area </div> </div>
0
source

More articles:


All Articles