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 view so that the main content appears before the side panel?
Bootstrap is a mobile first platform so change your mark up to how you want it to look on the mobile with the full xs-12. You can then use push and pull to move the column. Here is a link to the doc's.
<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>
Unfortunately, You can not reorder using push and pull for 12 column classes i.e. col-xs-12. Either change the markup to be able to include the 12 column grid system 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>
Related
I am looking for a technique to handle responsivity in html pages that have column-like structures with multiple items.
Here is an example:
Codepen
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="width:200;">
<div class="col-sm-6">
<div class="item">
First
<br><br>
</div>
<div class="item">
Second Second Second Second Second Second Second
<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
<div class="col-sm-6">
<div class="item">
First First First First First<br><br>
</div>
<div class="item">
Second<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
</div>
I would like it to look like this:
The height of each "item" needs to grow and shrink dynamically according to the length of its text and browser-window width, while staying aligned with the other column.
I also need that when the screen is narrow enough, the right column should move under the left column.
My problem is that for Bootstrap, I seem to need to place each column into a separate div.
On the other hand, when the columns appear side by side, if I want corresponding items to appear at the same height, I need to separate them into rows and not columns.
PS. I tried display:flex but could not find a way that works.
Any ideas?
Thanks
Arie
If you use BS3 but are willing to use flex aside, you can consider grid instead inside a mediaquerie and a custom class :
Your comment I react to:
Thanks G-Cyrillus. Is it possible to do that with Flex and Bs3? This is a large website which is built entirely with BootStrap3, and upgrading to Bs4 is currently not an option.
possible example with BS3, using a custom class inside a mediaquerie:
/*see us, demo purpose */
.row div {
box-shadow: 0 0 0 1px
}
/* custom class for the breakpoint where rows are drawn into columns with matching rows */
#media screen and (max-width: 992px) and (min-width:768px) {
:before,
:after {
grid-row: -1
}
.grid-md-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row dense;
}
.grid-md-2 [class^="col"] {
width: 100%;
grid-column: 1;
}
/*.grid-md-2 [class^="col"]:nth-child(3)~[class^="col"]*/
/* update for a repeating pattern */
.grid-md-2 [class^="col"]:nth-child(6n -2),
.grid-md-2 [class^="col"]:nth-child(6n -1),
.grid-md-2 [class^="col"]:nth-child(6n) {
grid-column: 2;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row grid-md-2">
<div class="col-sm-6 col-md-4 col-xs-12">
First
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Second
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Third
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
First First First
<br><br> First First
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Second<br>Second
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Third
</div>
</div>
</div>
The Bootstrap Grid layout is already dynamic in nature, so you don't need the style attribute for row width.
For the right column to go under the left column in the mobile view, use the bootstrap grid for mobile view. So just add the mobile view grid layout class name for each column div element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="item">
First
<br><br>
</div>
<div class="item">
Second Second Second Second Second Second Second
<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="item">
First First First First First<br><br>
</div>
<div class="item">
Second<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
</div>
For more visit Visit Here.
I have 3 div in my html. div1, div2,div3. Now in mobile version I want to change the alignment of those div. Please see the below images for better understand.
HTML
<div class="row">
<div class="col-md-12">
Div1
</div>
<div class="col-md-9" style="float:right;">
Div3
</div>
<div class="col-md-3" style="float:left;">
Div2
</div>
</div>
NOTE: I am using bootstrap 3
How to do that?
Anybody help please ?
You need to use Grid: column ordering
According to the mobile-first concept you need to define default view for mobile first in the right order.
section 1
section 3
section 2
Then assign col-md-push-3 for section 3 and col-md-pull-9 for section 2 and define its width using col-md- class.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>section 1</div>
</div>
<div class="col-xs-12 col-md-9 col-md-push-3">
<div>section 3</div>
</div>
<div class="col-xs-12 col-md-3 col-md-pull-9">
<div>section 2</div>
</div>
</div>
</div>
I answered something similar to this question before. reordering col-12 are not possible with bootstrap-3 (push/pull). You can use grid together with a media query to do this.
<div class="row reordered">
<div class="col-md-12">
Div1
</div>
<div class="col-md-3">
Div2
</div>
<div class="col-md-9">
Div3
</div>
</div>
css
#media screen and (max-width: 992px) { //col-md breakpoint
.reordered {
display: grid;
}
.reordered.col-md-3 {
order: 2;
}
.reordered.col-md-9 {
order: 1;
}
}
use col-sm-12 hopefully it will work
try this:
#media only screen and (max-width: 400px) {
.row {
display: grid !important;
grid-template-columns: auto !important;
}
}
basically what I'm trying to achieve using bootstrap is something like this
(https://ibb.co/mBB9P6P). When it's resized to smaller screens it should like
(https://ibb.co/0XnDy2S). Of course with the code I'm using, what happens is that second image goes behind second paragraph
My idea was using Bootstrap's order-first and order-last classes to achieve this and while it works for mobile, on desktop both pictures are on left. What I thought would work was removing a class from a div on different media query but I'm not sure if that's even an option.
<div class="row">
<div class="col-md-3">
<img src="img1.png">
</div>
<div class="col-md-9">
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p>Text</p>
</div>
<div class="col-md-3">
<img src="img1.png">
</div>
</div>
Bootstrap divides the screen up into 12 column grid. If you choose md-3 then you will get four cols max going across. You can specify multiple column formats all in the class attribute. https://getbootstrap.com/docs/4.0/layout/grid/ Hope this helps.
If you're using Bootstrap 4, then you can take advantage of its flex based layout and use the order property. Here is an example:
#media (max-width: 768px) {
.col-md-9 {
order: 2;
}
.col-md-3 {
order: 1;
}
}
img {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/250x150">
</div>
<div class="col-md-9">
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p>Text</p>
</div>
<div class="col-md-3">
<img src="https://placehold.it/250x150">
</div>
</div>
Here is a fiddle to play with: https://jsfiddle.net/2mwxeor5/1/
Drop Bootstrap (it will cause more issues anyway) and use flexbox. The order property will help you.
I am designing a stair grid for showing the growth of a child in 4 up steps.
What I did is: created four rows containing 4 columns. From the first div, I removed the first three column and put content in fourth. Similarly, on next bottom div I put content in the third column then in next bottom filled the second column.
After all these, I put top margin negative so that it looks like a stair.
I know this is not a good approach. How can I improve that?
I want it to be like this:
Current code:
<!--Here i have used the last column and col-md-9 remains blank-->
<!-- First row -->
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3 ml-md-auto bg-alert">
<img src="img/career/info2/4.png" class="img-responsive">
</div>
</div>
<!--Here i have used the second last column and col-md-6 remains blank-->
<!-- secondrow -->
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-3" style="margin-top:-14rem;">
<img src="img/career/info2/3.png" class="img-responsive">
</div>
<div class="col-md-3"></div>
</div>
<!--Here i have used second column and remains blank-->
<!-- Third row -->
<div class="row">
<div class="col-md-3 ml-md-auto"></div>
<div class="col-md-3 ml-md-auto" style="margin-top:-37rem;">
<img src="img/career/info2/2.png" class="img-responsive">
</div>
<div class="col-md-3"></div>
<div class="col-md-3 ml-md-auto"></div>
</div>
<!--Here i have used the first column and col-md-9 remains blank-->
<!-- Fourth row -->
<div class="row">
<div class="col-md-3">
<img src="img/career/info2/1.png" class="img-responsive">
</div>
<div class="col-md-9"></div>
</div>
Here's one way to solve this problem:
You put 4 columns into one single .row and then add 3 custom classes to the first 3 columns (.step-1 / .step-2 / .step-3).
Using #media (min-width: 768px) you ensure that those custom classes only kick in on medium (md) screens or larger. Then you add margin-top to each column as needed to push it down.
On screens that are smaller than md the 4 columns will stack up in the right order without any top margins affecting them.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
#media (min-width: 768px) {
.step-1 {
margin-top: 150px;
}
.step-2 {
margin-top: 100px;
}
.step-3 {
margin-top: 50px;
}
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3 step-1">Step 1</div>
<div class="col-md-3 step-2">Step 2</div>
<div class="col-md-3 step-3">Step 3</div>
<div class="col-md-3">Step 4</div>
</div>
</div>
One of our designers has created a layout where the footer content order changes from desktop to mobile. I'm using bootstrap and would like to do it as simply as possible. I believe the following is the correct markup but it doesn't seem to work for full width columns?
HTML
<div class="container">
<div class="row">
<div class="col-sm-12 col-sm-push-12">
<div class="row">
<div class="col-md-12">
<p>Ooo content</p>
</div>
</div>
</div>
<div class="col-sm-12 col-sm-pull-12">
<div class="row">
<div class="col-md-12">
<p>Ooo more content</p>
</div>
</div>
</div>
</div>
</div>
Example: https://jsfiddle.net/rwydcepc/
The aim of the above is to switch the top column with the bottom column when the sm is applied. This doesn't seem to happen though and everything screws up?
Is there another way to do this using bootstrap or with some simple additional css, ideally I'd like to avoid duplicate content and showing / hiding or relying on Javascript.
There is a similar question here but it doesn't answer the question: Change the order of col-*-12 columns in Bootstrap 3 by using push/pull
There is already a solution using Bootstrap reordering but not for 100% width columns, the below solution uses Flexbox method.
#media (max-width: 768px) {
.reorder .row {
display: flex;
display: -ms-flex;
flex-direction: column;
}
.reorder .row .item1 {
order: 2;
}
.reorder .row .item2 {
order: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container reorder">
<div class="row">
<div class="col-sm-12 item1">
<p>Ooo content</p>
</div>
<div class="col-sm-12 item2">
<p>Ooo more content</p>
</div>
</div>
</div>