Align multiple elements across bootstrap columns in the same row

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

1. 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
2. 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.

1. 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/

---

2. 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/

---

3. 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.