Bootstrap 3: How to get a lower column (default xs/mobile layout) to sit higher in larger viewports

Question

My issue is with my non-mobile layout. I have four columns. Here is their order (the widths are for sm/md/lg):

A(3-wide)
B(9-wide)
C(9-wide)
D(3-wide)

Column B is a big, variable-height column. So column A is always going to be shorter than B. When the viewport expands, my issue is that I can't get D to sit underneath A, even though they're both 3-wide columns and there is empty/unfilled space below A.

What I want:

BBB A
BBB D
BBB
CCC

What I have right now:

BBB A
BBB
BBB
CCC D

No matter what I try with push/pull, nesting, etc., D will not jump up into that space below A.

Here is my code, stripped down to the basics:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3 pull-right">
            <p>(A) Right-aligned, 3-wide div that's pretty short</p>
        </div>
        <div class="col-xs-12 col-sm-9 pull-left">
            <h1>(B) Left-aligned, large variable height content div.</h1>
            <h1>(B)</h1>
            <h1>(B)</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-9">
            <h3>(C) Left-aligned smaller content div</h3>
            <h3>(C)</h3>
            <h3>(C)</h3>
        </div>
        <div class="col-xs-12 col-sm-3">
            <h4>(D) Right-aligned, 3-wide div that I want to go below the first 3-wide div</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
        </div>
    </div>
</div>

I also drew it on paper, if that helps visualize the desired layout:

Any help would be very much appreciated. Thanks in advance.

Answer 1

If you need exactly 4 columns, you can use this solution:

1. Wrap B and C blocks into an additional block.
2. Apply the float: right property to the block A when the screen width becomes 786px or more. I've defined a new special class for this purpose.

Please check the result: https://jsfiddle.net/glebkema/ckLqrfmp/

@media (min-width: 768px) {
  .pull-sm-right {
    float: right !important;
  }
}

/* Decorations */
#A, #B, #C, #D { 
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  padding-top: 6px; 
}
#A { background: #c69; min-height:  50px; }
#B { background: #9c6; min-height: 150px; }
#C { background: #69c; min-height: 100px; }
#D { background: #ff0; min-height: 250px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div id="A" class="col-sm-3 pull-sm-right">A</div>
    <div class="col-sm-9">
      <div class="row">
        <div id="B" class="col-xs-12">B</div>
        <div id="C" class="col-xs-12">C</div>
      </div>
    </div>
    <div id="D" class="col-sm-3">D</div>
  </div>
</div>