Align multiple elements across bootstrap columns in the same row - html

Question

I would like to horizontally align multiple items across two columns within the same row in bootstrap. An example HTML Code can be found below:
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Short Heading</h1>
<p>Some super long content that will push the button far downward so that it will certainly not align with the next column anymore</p>
<button class="btn btn-primary">Button</button>
</div>
<div class="col-sm-6">
<h1>Super long Heading that requires 2 rows</h1>
<p>Some short content</p>
<button class="btn btn-primary">Button</button>
</div>
</div>
</div>
or in this fiddle http://jsfiddle.net/6pYhx/689/
Within the example, I would like to have 2 conditions
The header, p and button elements should be on the same horizontal height. In my example the right header is two rows, therefore the right p element is one row lower than the left p
If the screen size shrinks, all elements of column 1 should be right below each other, followed by all elements of column 2 -> I tried to solve it by having multiple rows, but then you'd have header 1, header 2, p 1, p 2, ... Instead I would like to have header 1, p 1, button 1, followed by header 2, p 2, button 2
Any ideas how to solve it with CSS?

Answer 1

I have three solutions.
Use flexbox at media >= 768px.
#media (min-width: 768px) {
.make-it-flex {
display: flex;
flex-wrap: wrap;
}
.flex-item-1 { order: 1; }
.flex-item-2 { order: 2; }
.flex-item-3 { order: 3; }
.flex-item-4 { order: 4; }
.flex-item-5 { order: 5; }
.flex-item-6 { order: 6; }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<h2>Flexbox</h2>
<div class="row make-it-flex">
<div class="col-xs-12 col-sm-6 flex-item-1"><div class="well">Header 1</div></div>
<div class="col-xs-12 col-sm-6 flex-item-3"><div class="well">Paragraph 1<br>has three lines<br>it's true</div></div>
<div class="col-xs-12 col-sm-6 flex-item-5"><div class="well">Button 1</div></div>
<div class="col-xs-12 col-sm-6 flex-item-2"><div class="well">Header 2<br>has two lines</div></div>
<div class="col-xs-12 col-sm-6 flex-item-4"><div class="well">Paragraph 2</div></div>
<div class="col-xs-12 col-sm-6 flex-item-6"><div class="well">Button 2<br>has two lines</div></div>
</div>
</div>
http://jsfiddle.net/glebkema/uuLqokhm/
Duplicate data and make two layouts for different screen sizes.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container visible-xs">
<h2>Columns</h2>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-12"><div class="well">Header 1</div></div>
<div class="col-xs-12"><div class="well">Paragraph 1<br>has three lines<br>it's true</div></div>
<div class="col-xs-12"><div class="well">Button 1</div></div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-12"><div class="well">Header 2<br>has two lines</div></div>
<div class="col-xs-12"><div class="well">Paragraph 2</div></div>
<div class="col-xs-12"><div class="well">Button 2<br>has two lines</div></div>
</div>
</div>
</div>
</div>
<div class="container hidden-xs">
<h2>Lines</h2>
<div class="row">
<div class="col-xs-12 col-sm-6"><div class="well">Header 1</div></div>
<div class="col-xs-12 col-sm-6"><div class="well">Header 2<br>has two lines</div></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6"><div class="well">Paragraph 1<br>has three lines<br>it's true</div></div>
<div class="col-xs-12 col-sm-6"><div class="well">Paragraph 2</div></div>
</div>
<div id="line-3" class="row">
<div class="col-xs-12 col-sm-6"><div class="well">Button 1</div></div>
<div class="col-xs-12 col-sm-6"><div class="well">Button 2<br>has two lines</div></div>
</div>
</div>
http://jsfiddle.net/glebkema/cjs1q42m/
Add the script and transmit data from one layout to another.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<h2>Columns</h2>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div id="column-1" class="row">
<div class="col-xs-12 column-1 line-1"><div class="well">Header 1</div></div>
<div class="col-xs-12 column-1 line-2"><div class="well">Paragraph 1<br>has three lines<br>it's true</div></div>
<div class="col-xs-12 column-1 line-3"><div class="well">Button 1</div></div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div id="column-2" class="row">
<div class="col-xs-12 column-2 line-1"><div class="well">Header 2<br>has two lines</div></div>
<div class="col-xs-12 column-2 line-2"><div class="well">Paragraph 2</div></div>
<div class="col-xs-12 column-2 line-3"><div class="well">Button 2<br>has two lines</div></div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Lines</h2>
<div id="line-1" class="row">
</div>
<div id="line-2" class="row">
</div>
<div id="line-3" class="row">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var idColumn1 = $('#column-1');
var idColumn2 = $('#column-2');
var idLine1 = $('#line-1');
var idLine2 = $('#line-2');
var idLine3 = $('#line-3');
var classColumn1 = $('.column-1');
var classColumn2 = $('.column-2');
var classLine1 = $('.line-1');
var classLine2 = $('.line-2');
var classLine3 = $('.line-3');
checkLayout();
$( window ).resize(function() {
checkLayout();
});
function checkLayout() {
var classSm6 = 'col-sm-6';
if (( window.innerWidth <= 768 ) && classColumn1.hasClass(classSm6)) {
// console.info( "resize to xs" );
classColumn1.appendTo(idColumn1).removeClass(classSm6);
classColumn2.appendTo(idColumn2).removeClass(classSm6);
} else if (( window.innerWidth > 768 ) && !classLine1.hasClass(classSm6)) {
// console.info( "resize to sm" );
classLine1.appendTo(idLine1).addClass(classSm6);
classLine2.appendTo(idLine2).addClass(classSm6);
classLine3.appendTo(idLine3).addClass(classSm6);
}
}
});
</script>
http://jsfiddle.net/glebkema/cjwc6uev/

Answer 2

Do you want them to be centered in the columns? You could use text-center class on each column.
<div class="col-sm-6 text-center">
If you want them vertically centered, there are a few ways to do it. I recently had this issue and we changed display to table-cell and used the vertical-align: middle; in CSS (example here). Or you can use flexbox, but it doesn't work in all browsers.

Answer 3

Is this what you are trying? Make the preview screen bigger to see the result if you are testing it in jsfiddle:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<h1 class="col-md-3">Short Heading</h1>
<p class="col-md-7">Some super long content that will push the button far downward so that it will certainly not align with the next column anymore</p>
<button class="btn btn-primary class="col-md-2"">Button</button>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<h1 class="col-md-3">Super long Heading that requires 2 rows</h1>
<p class="col-md-7">Some short content</p>
<button class="btn btn-primary col-md-2">Button</button>
</div>
</div>
</div>
</div>
also, you can play with the inner columns to make them the right size for your needs, but this is, as you needed, on the same row. I made this for medium or wider screens and on small screens it will be defaulted to the normal behaviour of having them one under another, but again, you can play with that by changing the md part or adding more classes like col-xs-... col-sm-... col-lg-...
here's how that looks:
you can also try this if you want your content to be horizontally aligned as well, it is a bit tricky but it works:
https://plnkr.co/edit/s01bZi2OJc8xm2QlKuII?p=preview