Twitter Bootstrap 3 - Swap columns on extra-small devices [duplicate] - html

This question already has answers here:
Bootstrap 3: Push/pull columns only on smaller screen sizes
(2 answers)
Closed 8 years ago.
I have two columns in Twitter bootstrap, they look like this:
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="post">
Something here
</div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="post">
Something here
</div>
</div>
It scales down to full-width perfectly when on xs resolution, but I would like to swap those two columns with each other, so that the second column in the code would be the first column displayed and the first column in the code would be the second column displayed.
I tried using col-xs-pull-12 and col-xs-push-12 but it gave me weird results, columns were absolutely off grid. How can I swap them using bootstrap's classes? I want this to happen only on xs resolution.

You need to use pull and push on the right way .... That is for the larger devices:
Change the order of your markup exact the same you want on Mobile -- Mobile First
Add push and pull to change the order on larger devices
<div class="col-md-8 col-md-push-4 col-sm-6 col-sm-push-6 col-xs-12">
<div class="post">
Something here Now
</div>
</div>
<div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6 col-xs-12">
<div class="post">
Something here
</div>
</div>
Check this BottplyDemo

Related

Different layout for columns grid at md and at sm/xs - Bootstrap

guys. I have a little problem here working with bootstrap. I am trying to make a div container with a row containing 3 columns equally proportioned in width :
<div class="row">
<div class="col-md-4" style="background:red;">logo</div>
<div class="col-md-4" style="background:blue;">content</div>
<div class="col-md-4" style="background:yellow;">content+imgs</div>
</div>
</div>
The problem I have is that I want the column with 'logo' to be the second one (after 'content') on xs/sm devices or at resizing the browser window. I tried with push and pull, but I want the columns to be one above each other, not inline, as at the md devices. I have no clue how to do that, any help? :)
Using order classes with bootstrap, you can change the order of the columns responsively.
This example will put the second column first on XS and SM screens.
<!--bootstrap 4-->
<div class="row">
<div class="col-md-4 order-2 order-md-1">first</div>
<div class="col-md-4 order-1 order-md-2">second</div>
<div class="col-md-4 order-3 order-md-3">third</div>
</div>
edit:
For bootstrap 3 (3.3.7) you will need to use push & pull classes. In your case, you would have to make the logo the second column. Mobile counts as the starting point in bootstrap development.
<!-- bootstrap 3 -->
<div class="row">
<div class="col-md-4 col-md-push-4" style="background-color:red;">content</div>
<div class="col-md-4 col-md-pull-4" style="background-color:blue;">logo</div>
<div class="col-md-4" style="background-color:yellow;">content+imgs</div>
</div>

How to set margin/padding for a device

Im making my website responsive for devices but i want to know if i can set a grid or margin/padding property for iphone so i can place it nicely and not 2 paragraphs in eachother.
I already tried to grid some text but it still looks weird in eachother this is my code:
<div class="row">
<div class="col-xs-1 col-lg-12">
Thisismy Test
</div>
</div>
You haven't tagged this as being a Bootstrap grid, but I'm assuming it is because of your grid classes.
You mention that you want to stop the navbar-brand text from wrapping on an iPhone so I'm wondering if there's there a reason why you wouldn't make the navbar-brand parent wider?
It looks to me as if it would need to be minimum col-xs-5
Here's a example showing both your existing HTML and the modification
https://codepen.io/panchroma/pen/OgQxBw
HTML
<div class="row">
<div class="col-xs-5 col-lg-12">
Thisismy Test
</div>
</div>
If you want to show the paragraph in entire row in mobile , use col-xs-12 class which will occupy the entire row space and display everything in one row in all th escreen sizes.
<div class="row">
<div class="col-xs-12">
Thisismy Test
</div>
</div>
If you want to display 2 paragraphs in row side by side use col-xs-6 for each div
<div class="row">
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
</div>
If you want to write your own CSS , you can do that by using media queries to define custom CSS for different screen sizes https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

How to align content in two columns with bootstrap css?

I have some html content that I want to align and distribute as two columns beneath each other, of equal content.
But on mobile divices, I'd like the content to be stacked as one column.
How could I achieve this using bootstrap css?
I tried as follows, which did not work:
<div class="row">
<div class="col-lg-2">
//the content to distribute
</div>
</div>
Additionally, I cannot use css columns as I have to support IE8+9.
<div class="row">
<div class="col-xs-12 col-sm-6">
//first half
</div>
<div class="col-xs-12 col-sm-6">
//second half
</div>
</div>
The col-xs-12 tell the column to be at full screen when using mobile phones (or small screens).
The col-sm-6 tell the column to be at half size of the row when using any higher size devices.
I suggest reading bootstrap docs
----Edit----
If you want to use columns css- also for ie8,9 you can check this js plug in:
http://welcome.totheinter.net/columnizer-jquery-plugin/
hi you can use this i think please take a look
.tt{
border : 2px solid grey;
}
<div class="container">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
first half
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
second half
</div>
</div>
</div>
and here is the working demo code..
Demo code

What is the purpose of using multiple bootstrap column sizes?

I'm fairly new to Bootstrap, and I understand how Bootstrap uses a 12-column grid. When I want to make utilize a Bootstrap grid, I traditionally do it like this:
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
I also understand that different column sizes are used for different screen sizes
<div class="row">
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
</div>
However, I've seen a lot of people do something similar to this:
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
</div>
Why use multiple column sizes? Will the browser detect which one is appropriate to use?
There is absolutely no reason to have all three classes in this example:
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
<div class="col-xs-6 col-md-6 col-lg-6">
...
</div>
</div>
It is effectively the same as this:
<div class="row">
<div class="col-xs-6">
...
</div>
<div class="col-xs-6">
...
</div>
</div>
Bootstrap grid classes work on all sizes above the size specified, so applying col-xs-6 will cause that element to also contain 6 columns on any larger screen sizes, like sm, md, etc. I'm guessing that whoever is including all three classes in the first example does not have a firm understanding of how the Bootstrap grid system works.
You only need to include multiple classes if you want the element to be a different size on different screen sizes:
<div class="row">
<div class="col-xs-4 col-md-3 col-lg-2">
...
</div>
<div class="col-xs-8 col-md-9 col-lg-10">
...
</div>
</div>
Multiple col sizes are for different types of screens:
xs: Extra Small screens (phones)
sm: Screen like for tablets
md: Screen like Desktop
lg: Screen for larger desktops
Basically these will be defined in various media queries in bootstrap.css which helps browser to detect which one to use.
Learn more here
Addendum
The use of different col classes mentioned above should be in the only situation where you are specifying different column sizes for different screens. For ex: if you want 12 col in xs, 6 col in sm, 3 col in md and 2 col in lg, then you can use it as col-xs-12 col-sm-6 col-md-3 col-lg-2. Otherwise if they are going to be same for all the screens then you can use any one from above, as in col-lg-6. This will tell browser to use 6 cols irrespective of screen size.
Have a look at this page to get an idea
http://getbootstrap.com/examples/grid/
In general The idea behind using multiple col classes is to use different width percentages based on the screen size :
Example :
if u add a col-md-6 and a col-xs-12 on a element , when the screen size is near the medium breakpoint it will use 6 columns but when the screen size is small it would use the entire width
The method is usually used for screen sizes. It is so you don't end up with 7 columns on a 7-inch screen. For example; with <div class="col-xs-1 col-md-3 col-lg-6"> you can have 1 column on a phone, 3 columns on a large tablet and 6 columns on a desktop monitor.

Boostrap 3 : ordering elements for different size

I have 3 divs of 3, 3, 6 width in bootstrap. I want them to be horizontally aligned all the time except for the xs. I want the first 2 div's is one line and the last divs to come below them in small devices. How can I achieve it.
I'm guessing you want something like this:
<div class="row">
<div class="col-sm-3 col-xs-6"></div>
<div class="col-sm-3 col-xs-6"></div>
<div class="col-sm-6 col-xs-12"></div>
</div>