Bootstrap Column Reordering Sizing Problems - html

I'm trying to reorder the columns on my website via Bootstrap's method of reordering columns depending on the screen size which works fine for most of the responsive layouts I'm testing apart from 1.
The layout having problems is the Tablet Landscape Layout (1024 x 768) which displays like this:
Every other screen displays the blue div and the right div either with the red div on top if the screen is too small or on the right with the blue div aligning itself exactly next to it if the screen is large enough.
This is the code I'm using right now:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
Basket
</div>
<div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
News
</div>
</div>
</div>
</div>
Does anyone know why the blue div is so far to the right on the Tablet Landscape layout rather than touching the red div like it should?

Some general markup issues:
First of all, there's no col-xl-*, so you can get rid of those.
Secondly, you don't need col-xs-12, since the default is for it take up the whole width unless otherwise specified.
Third, Bootstrap is mobile first, so larger sizes will override the existing smaller sizes, meaning if you don't intend on changing something, there's no need to specify the larger size again.
The actual issue is that col-*-pull-* is relative to where the element would be placed. Bear in mind, you haven't changed anything in the document flow. So the elements are positioned normally and then phase shifted with left or right. Since the blue container would normally start 4 columns over, you only need to pull it back by 4 columns, instead of 8.
The whole thing can be rewritten like this:
.red { background: red }
.blue { background: blue }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-4 col-md-push-8 red"> Basket </div>
<div class="col-md-8 col-md-pull-4 blue"> News </div>
</div>
</div>

Related

Bootstrap4 columns containing absolutely positioned elements

I have been working on a game and, for certain things, I used absolute positioning. In particular, I need it for some moving animations where I have to slide elements around and overlap them to create an effect.
I'm trying to work on making the game good-looking on mobile, and I've been running into some problems caused by Bootstrap columns that contain those absolutely positioned elements.
This is the look I'm trying to get (aside from the badly aligned number), notice the red squared row in the middle:
The whole center part of the screen (the row with buttons, emojis, and the centered card icon underneath) is a row containing cols. This is some of its markup
<div class="col order-1 order-xl-1 col-4 col-xl-2">
<div style="display:inline-block">
<p class="backgrounded-text" style="white-space: nowrap; text-overflow: ellipsis;"><span id="turn_elem">...</span></span></p>
<p class="backgrounded-text">Carta attuale: <span id="curr_card"><img class="card_icon" /></span></p>
</div>
</div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">
<span style="padding-left:5px!important;padding-right:5px!important" class="reaction_title">Reazioni:</span>
<table>
<!-- emojis ... -->
</table>
</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">
<span>...</span><br />
<span id="hidden_card">
<img class="card_placeholder" src="..." />
</span>
<span id="card_stack" class="slide_to_right">
<img class="card_placeholder" src="..." />
</span>
<div id="stacked_card">
<img id="stacked_front" class="card_placeholder" src="..." />
</div>
<div id="hidden_uncovered_card_div">
<img id="hidden_uncovered_card" class="card_placeholder" src="..." />
</div>
</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">
<button style="width: 49%" class="btn btn-lg btn-dark" id="doubt" #click="doubt()" :disabled="playing_animation">Dubito!</button>
<button style="width: 49%" class="btn btn-lg btn-dark">
Metti giĆ¹
</button>
</div>
</div>
The img that has id hidden_card is a card to the left of the red one that is made visible and slides to the right to cover that (it uses jQuery animate to manipulate the position). On top of stacked_card, which is the main red card that's displayed in the screenshots, there's another copy of it, that is flipped with jQuery and moved to the right to overlap hidden_uncovered_card. This is pretty much how the animations work. They all depend on using position: absolute and manipulating the positioning.
For some reason, the actual look I'm getting with the above code is this:
There is some space in between the three columns on the top and the one containing the red card back, and I don't understand where it is coming from.
Removing all the position: absolute seems to fix this, but of course, then all the animations that depend on it stop working.
Is there any way to fix this positioning without removing the position: absolute? It'd be a pain to have to rewrite the code for all the animations, as it's working perfectly on desktop.
Here's a static webpage that contains the markup. You can turn it to mobile view (the screenshots were taken as iPhone 6/7/8 mode) and see for yourself.
click
The actual app (a beta version, that is) can be found here, in case you wanted to see how the animations work. If you need any additional information, just let me know.
Bootstrap is using a 12 colums grid.
Check how you use them.
You have:
<div class="col order-1 order-xl-1 col-4 col-xl-2">The two button on the left<div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">the emojis</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">the red cards</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">the three button on the right</div>
You should clean that!!!
Example:
col followed by col-4 is the same as just col-4 where col-4 overrides col.
order-1 and order-xl-1 is redondant if there is no order-md-3 (for example)
Just order-1 is enought here.
For these 4 divs, make sure you use the 12 grid spaces correctly.
So about the col and col-* usage, for mobile size, you actually have 24 spaces used out of 12.
4 spaces
4 spaces
12 spaces
4 spaces
And whent the col-xl-* applies, you have 10 spaces used out of 12. Is that on purpose?
2 spaces
2 spaces
3 spaces
3 spaces
So here is what I suggest for a start:
<div class="col-3 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-2 col-xl-3 order-3">the red cards</div>
<div class="col-3 order-4">the three button on the right</div>
which doesn't change the xl size at all, but produces this (iphone 6/7/8 mode):
That's a start.
So the trick is to have the classe in order... All the col-* from default to the bigger specific size... And then the order-* in order too. That make the markup readable.
;)
EDIT
To have the red cards looking like on another row :
<div class="col-4 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-10 col-xl-3 order-4 order-xl-3 sm-translateUp">the red cards</div>
<div class="col-4 order-3 order-xl-4">the three button on the right</div>
Notice the order changed and that there is an additional .sm-translateUp class which would be:
#media screen and (max-width: 576px){
.sm-translateUp{
transform: translateY(-85px);
}
}
That makes:
Now that really looks like a hack... (LOL) But since that col is trapped inside its parent .row, that is all I think of for the moment.
So have that class defined inside all necessary #media rules for each bootstrap break points:
sm: >= 576px
md: >= 768px
lg: >= 992px
xl: >= 1200px

How to flip columns from bootstrap on mobile [duplicate]

I'm making a responsive layout with a top fixed navbar. Underneath I have two columns, one for a sidebar (3), and one for content (9). Which on desktop looks like this
navbar
[3][9]
When I resize to mobile the navbar is compressed and hidden, then the sidebar is stacked on top of the content, like this:
navbar
[3]
[9]
I would like the main content at the top, so I need to change the order on mobile to this:
navbar
[9]
[3]
I found this article which covers the same points, but the accepted answer has been edited to say that the solution no applies to the current version of Bootstrap.
How can I reorder these columns on mobile? Or alternatively, how can I get the sidbar list-group into my expanding navbar?
Here is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Brand Title
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right"><!--original navbar-->
<li class="active">Home</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div><!--End Navbar Div-->
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Lorem ipsum</h4>
<p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
</div>
</div><!--end sidebar-->
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
Main Content
</div>
</div>
</div><!--end main content area-->
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Working fiddle here.
Updated 2018
For the original question based on Bootstrap 3, the solution was to use push-pull.
In Bootstrap 4 it's now possible to change the order, even when the columns are full-width stacked vertically, thanks to Bootstrap 4 flexbox. OFC, the push pull method will still work, but now there are other ways to change column order in Bootstrap 4, making it possible to re-order full-width columns.
Method 1 - Use flex-column-reverse for xs screens:
<div class="row flex-column-reverse flex-md-row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9">
main
</div>
</div>
Method 2 - Use order-first for xs screens:
<div class="row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9 order-first order-md-last">
main
</div>
</div>
Bootstrap 4(alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr
Original 3.x Answer
For the original question based on Bootstrap 3, the solution was to use push-pull for the larger widths, and then the columns will show is their natural order on smaller (xs) widths. (A-B reverse to B-A).
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
main
</div>
<div class="col-md-3 col-md-pull-9">
sidebar
</div>
</div>
</div>
Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel
#emre stated, "You cannot change the order of columns in smaller screens but you can do that in large screens". However, this should be clarified to state: "You cannot change the order of full-width "stacked" columns.." in Bootstrap 3.
Bootstrap 3 Answer
The answers here work for just 2 cells, but as soon as those columns have more in them it can lead to a bit more complexity. I think I've found a generalized solution for any number of cells in multiple columns.
Goals
Get a vertical sequence of tags on mobile to arrange themselves in whatever order the design calls for on tablet/desktop. In this concrete example, one tag must enter flow earlier than it normally would, and another later than it normally would.
Mobile
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
Tablet+
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
So headline needs to shuffle right on tablet+, and technically, so does desc - it sits above the caption tag that precedes it on mobile. You'll see in a moment 4 caption is in trouble too.
Let's assume every cell could vary in height, and needs to be flush top-to-bottom with its next cell (ruling out weak tricks like a table).
As with all Bootstrap Grid problems step 1 is to realize the HTML has to be in mobile-order, 1 2 3 4 5, on the page. Then, determine how to get tablet/desktop to reorder itself in this way - ideally without Javascript.
The solution to get 1 headline and 3 qty to sit to the right not the left is to simply set them both pull-right. This applies CSS float: right, meaning they find the first open space they'll fit to the right. You can think of the browser's CSS processor working in the following order: 1 fits in to the right top corner. 2 is next and is regular (float: left), so it goes to top-left corner. Then 3, which is float: right so it leaps over underneath 1.
But this solution wasn't enough for 4 caption; because the right 2 cells are so short 2 image on the left tends to be longer than the both of them combined. Bootstrap Grid is a glorified float hack, meaning 4 caption is float: left. With 2 image occupying so much room on the left, 4 caption attempts to fit in the next available space - often the right column, not the left where we wanted it.
The solution here (and more generally for any issue like this) was to add a hack tag, hidden on mobile, that exists on tablet+ to push caption out, that then gets covered up by a negative margin - like this:
[2 image ][1 headline]
[ ][3 qty ]
[ ][4 hack ]
[5 caption][6 desc ^^^]
[ ][ ]
http://jsfiddle.net/b9chris/52VtD/16633/
HTML:
<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>
CSS:
#hack { height: 50px; }
#media (min-width: #screen-sm) {
#desc { margin-top: -50px; }
}
So, the generalized solution here is to add hack tags that can disappear on mobile. On tablet+ the hack tags allow displayed tags to appear earlier or later in the flow, then get pulled up or down to cover up those hack tags.
Note: I've used fixed heights for the sake of the simple example in the linked jsfiddle, but the actual site content I was working on varies in height in all 5 tags. It renders properly with relatively large variance in tag heights, especially image and desc.
Note 2: Depending on your layout, you may have a consistent enough column order on tablet+ (or larger resolutions), that you can avoid use of hack tags, using margin-bottom instead, like so:
Note 3: This uses Bootstrap 3. Bootstrap 4 uses a different grid set, and won't work with these examples.
http://jsfiddle.net/b9chris/52VtD/16632/
October 2017
I would like to add another Bootstrap 4 solution. One that worked for me.
The CSS "Order" property, combined with a media query, can be used to re-order columns when they get stacked in smaller screens.
Something like this:
#media only screen and (max-width: 768px) {
#first {
order: 2;
}
#second {
order: 4;
}
#third {
order: 1;
}
#fourth {
order: 3;
}
}
CodePen Link: https://codepen.io/preston206/pen/EwrXqm
Adjust the screen size and you'll see the columns get stacked in a different order.
I'll tie this in with the original poster's question. With CSS, the navbar, sidebar, and content can be targeted and then order properties applied within a media query.
In Bootstrap 4, if you want to do something like this:
Mobile | Desktop
-----------------------------
A | A
C | B C
B | D
D |
You need to reverse the order of B then C then apply order-{breakpoint}-first to B. And apply two different settings, one that will make them share the same cols and other that will make them take the full width of the 12 cols:
Smaller screens: 12 cols to B and 12 cols to C
Larger screens: 12 cols between the sum of them (B + C = 12)
Like this
<div class='row no-gutters'>
<div class='col-12'>
A
</div>
<div class='col-12'>
<div class='row no-gutters'>
<div class='col-12 col-md-6'>
C
</div>
<div class='col-12 col-md-6 order-md-first'>
B
</div>
</div>
</div>
<div class='col-12'>
D
</div>
</div>
Demo: https://codepen.io/anon/pen/wXLGKa
Starting with the mobile version first, you can achieve what you want, most of the time.
Examples here:
http://jsbin.com/wulexiq/edit?html,css,output
<div class="container">
<h1>PUSH - PULL Bootstrap demo</h1>
<h2>Version 1:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 col-sm-push-3 green">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 2:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 3:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 cyan">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW XS-SMALL SCREEN
</div>
</div>
<h2>Version 4:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 beige">
MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
</div>
This is quite easy with jQuery using insertAfter() or insertBefore():
<div class="left">content</div>
<div class="right">sidebar</div>
<script>
$('.right').insertBefore('left');
</script>
If you want to to set o condition for mobile devices you can make it like this:
<script>
var $iW = $(window).innerWidth();
if ($iW < 992){
$('.right').insertBefore('.left');
}else{
$('.right').insertAfter('.left');
}
</script>
example
https://jsfiddle.net/w9n27k23/
Its very simple, write your html the way you would want it to be viewed in mobile. Then using the bootstrap order class you can arrange how you want it to viewed on desktop.
<html>
<head>
<title>Order View</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col order-md-2">
<h1>IMAGE</h1>
</div>
<div class="col order-md-1">
<h1>TEXT</h1>
</div>
</body>
</html>

Combining columns in bootstrap for smaller devices

I have 3 divs inside one div horizontally aligned.
| 1 | 2 | 3 |
In smaller devices, I want 3 to move to under 1 and look like this:
| 1 | 2 |
| 3 | 2 |
I can do that creating different layouts maybe, but is there anyway to do in bootstrap using grids?
EDIT
Here is a demonstration of what I want to achieve. In desktop, I want it to look like this:
In Mobile:
Demo
HTML:
<div class="col-xs-4 col-sm-4" style="height:100px;background:red;">A</div>
<div class="col-xs-8 col-sm-4 float" style="height:100px;background:blue">B</div>
<div class="col-xs-4 col-sm-4" style="height:100px;background:green">C</div>
CSS:
#media (max-width: 768px)
{
.float
{
float:right!important;
height:200px!important;
}
}
Yes you can do it via col-sm-push and col-sm-pull similar post;
Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3
Also check a much detail post here.
I'm assuming you want the 3rd box to be directly below the 1st box while the 2nd box is higher than the 1st box. This can only be achieved in Bootstrap by duplicating the contents of the 3rd box and hiding/showing it based on the grid size (e.g. sm). Pushing or pulling columns, using e.g. col-sm-push-4, won't help as they'll never make a column wrap to the next line.
As Bootstrap is a mobile first framework, the first step is to create the small layout. In order to get the 3rd box directly below the 1st box we'll need to use column nesting. The idea is to put the 1st and 3rd box in an inner grid inside the left column of the outer grid, while the 2nd box will be put in right column of the outer grid. Notice that the inner grid needs a .row to offset the padding of its parents col-xs-6, and that the columns inside the inner grid count up to 12. Some people think it needs to count up to 6 as they exist inside a col-xs-6, but that isn't the case.
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
<div class="box box--one">One</div>
</div>
<div class="col-xs-12">
<div class="box box--three">Three</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="box box--two">Two</div>
</div>
</div>
</div>
The small layout now looks good. To get the other layout (I've assumed md as its breakpoint) change both col-xs-6 to col-xs-6 col-md-4 and add a 3rd column to the outer grid containing the 3rd box.
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-md-4">
<div class="box box--three">Three</div>
</div>
</div>
</div>
It now looks completely broken, the 3rd box is shown twice and one of them is overlapping the 1st and 2nd box on screens smaller than md. We can fix this by hiding the columns containing the 3rd box for specific grid sizes. To hide the 3rd box inside the inner grid for larger screens change <div class="col-sm-12"> into <div class="col-sm-12 hidden-md hidden-lg">. And to hide the 3rd outer column for smaller screens change <div class="col-md-4"> into <div class="col-md-4 hidden-xs hidden-sm">
See the entire example code below:
.box {
border: 1px solid #c66;
background-color: #f99;
padding: 15px;
color: #fff;
font-family: Helvetica, Arial;
font-size: 24px;
}
.box--one,
.box--three {
height: 100px;
}
.box--two {
height: 200px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="row">
<div class="col-xs-12">
<div class="box box--one">One</div>
</div>
<div class="col-xs-12 hidden-md hidden-lg">
<div class="box box--three">Three</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="box box--two">Two</div>
</div>
<div class="col-md-4 hidden-xs hidden-sm">
<div class="box box--three">Three</div>
</div>
</div>
</div>
PS If you don't like duplicating the 3rd box, as perhaps there's a lot of content inside, you can also use JavaScript to move the box into it's proper column when a breakpoint change occurs. I've made some jQuery plugin prototype that should be able to do this, see https://github.com/ckuijjer/jquery-breakpointspy
PS I just saw your updated question: if the boxes have a fixed height, simply add a class to the 3rd box of the large layout that gets a fixed height. If they don't have a fixed height, create some JavaScript that set the height to be equal and attach it to the resize event. A completely different solution would be to look into flexbox.

Bootstrap GRID System possible?

Good day! I am trying to figure out if the scenario below is possible.
When it is on desktop/laptop the layout should be like this
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9">
article
</div>
When it is on small screen the two div will switch and must be like this one
<div class="col-md-9">
sidebar
</div>
<div class="col-md-3">
article
</div>
Your answer is appreciated!
You can! By adding multiple grid classes to your <div>'s you can define the size of your columns for each breakpoint. In your case this might be col-xs-9 col-md-3 on the sidebar and col-xs-3 col-md-9 on the article. This would make the sidebar take up 9 out of 12 columns for the xs and sm breakpoint sizes, and 3 out of 12 columns for the md and lg breakpoint sizes.
Open the following example in fullscreen to play with the breakpoints.
.box {
border: 1px solid #c66;
background-color: #f99;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-9 col-md-3 box">
sidebar
</div>
<div class="col-xs-3 col-md-9 box">
article
</div>
From your comment I see you want the article to be on top of the sidebar for small screens. This is a bit more tricky. You need to do three things:
Develop mobile first by starting with the layout for small screens. You need to change the order of the sidebar and article <div>.
Make sure that on small screens both the sidebar and the article take up 12 out of 12 columns by using col-xs-12. This will make the sidebar get pushed below the article.
Note that on desktop screens the sidebar and article do appear next to eachother, but with the sidebar on the right instead of the left. You can change this by pulling the sidebar to the left by adding col-md-pull-9 (you need to pull it 9 columns to the left, the amount of columns that the article takes up) and pushing the article to the right by adding col-md-push-3 (you need to push it 3 columns to the right, the amount of columns that the sidebar takes up).
See the updated example:
.box {
border: 1px solid #c66;
background-color: #f99;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-md-9 col-md-push-3 box">
article
</div>
<div class="col-xs-12 col-md-3 col-md-pull-9 box">
sidebar
</div>
There is few prefixes for bootstrap to specify width class: -xs- / -sm- / -md- / -lg- (from smallest to biggest width).
So from -md- and bigger screen you have col-md-3 and col-md-9. To get them in reverse order on pre--md- class you can specify -xs- or -sm- prefix.
So to reverse your classes, just write:
<div class="col-md-9 col-xs-3"></div>
<div class="col-md-3 col-xs-9"></div>
Try this:
<div class="col-sm-9 col-md-3">
sidebar
</div>
<div class="col-sm-3 col-md-9">
article
</div>
This will display the sidebar in 9 blocks in eXtraSmall (xs) and SMall (sm) and in 3 Blocks for MeDium (md) and LarGe (lg) and vice versa.

Bootstrap div respnsive table with multiple alignments at breakpoints

I'm having a bit of a hickup with bootstrap. Here's the deal:
I have a table made with divs with 4 fields, but I want them to have different alignments when they are being viewed on a mobile phone. Let me put the code of my table here to help explain:
<div class="table-responsive container text-center">
<div class="visible-md-block visible-lg-block row">
<div class="col-xs-4 col-md-3"><strong>From</strong></div>
<div class="col-xs-4 col-md-3"><strong>Points</strong></div>
<div class="col-xs-4 col-md-3"><strong>To</strong></div>
<div class="col-xs-12 col-md-3"><strong>Description</strong></div>
</div>
<div class="row">
<div class="col-xs-4 col-md-3">John doe</div>
<div class="col-xs-4 col-md-3">+20</div>
<div class="col-xs-4 col-md-3">Jane doe</div>
<div class="col-xs-12 col-md-3">Test Description</div>
</div>
</div>
There. If you are aware of bootstrap, you'll by now have realized the type of layout it will adopt. but I'll explain anyways:
When the viewport goes to a phone screen size I want the description column to go below the other ones.
Thing is, on that phone screen size I want to put the alignment diffrently from the centered one (that I defined on the table).
I want the "From" column aligned to the left, the "Points" column center aligned and the "To" column right aligned and the "Description" column to be center aligned while on larger viewports I want them to have a diffrent alignment. How would I pull such an effect off?
Also tips on weather I should use a table or keep using divs for this type of responsive coding are welcome :p
To accomplish the behavior you're after, you're likely going to need to come up with your own class, give it the majority of behaviors that col-xs-4 and col-md-3 have, and add your own home brewed styling to make the Description column fall below the other three for certain #media queries, etc.
media all and (max-width: 1000px) {
.custom-col-xs-4 {
float: left;
}
.costom-col-xs-4-lower {
clear: both;
}
}
Consider step 9 of this 10 step positioning tutorial when doing so: http://www.barelyfitz.com/screencast/html-training/css/positioning/