Responsive rows height issue

Question

Here's a problem I have. Please resize the window from XS to LG to see the problem.

http://www.bootply.com/ViRGDgxLoQ

In LG mode, everythings good. In XS mode, everythings good.

MD mode is not good on the last set of panels. I was expecting panel 3 to be below panel 1 even if it brings it down a little.

I can't make 2 different because it'll break for logic for LG screens.

Is that possible?

Answer 1

You need another wrapper, something like this:

      <div class="container">
        <h2>Obvious Behavior</h2>
        <div class="row">
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-heading">Title1</div>
              <div class="panel-body">Content here1..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-heading">Title2</div>
              <div class="panel-body">Content here2..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-heading">Title3</div>
              <div class="panel-body">Content here3..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-heading">Title4</div>
              <div class="panel-body">Content here4..</div>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <h2>Desired Behavior</h2>
        <div class="row">
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-primary">
              <div class="panel-heading">Title1</div>
              <div class="panel-body">Content here1..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-primary">
              <div class="panel-heading">Title2</div>
              <div class="panel-body">Content here2..<br>Content here2..<br>Content here2..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-primary">
              <div class="panel-heading">Title3</div>
              <div class="panel-body">Content here3..</div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-xs-12">
            <div class="panel panel-primary">
              <div class="panel-heading">Title4</div>
              <div class="panel-body">Content here4..</div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <h2>Bad Behavior</h2>
        <div class="row">

          <div class="col-lg-6 col-md-12">
            <div class="col-lg-6 col-md-6 col-xs-12">
              <div class="panel panel-success">
                <div class="panel-heading">Title1</div>
                <div class="panel-body">Content here1..<br>Content here1..<br>Content here1..</div>
              </div>
            </div>

            <div class="col-lg-6 col-md-6 col-xs-12">
              <div class="panel panel-success">
                <div class="panel-heading">Title2</div>
                <div class="panel-body">Content here2..</div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-12">
            <div class="col-lg-6 col-md-6 col-xs-12">
              <div class="panel panel-success">
                <div class="panel-heading">Title3</div>
                <div class="panel-body">Content here3..</div>
              </div>
            </div>

            <div class="col-lg-6 col-md-6 col-xs-12">
              <div class="panel panel-success">
                <div class="panel-heading">Title4</div>
                <div class="panel-body">Content here4..</div>
              </div>
            </div>
          </div>

        </div>
      </div>

Forked your code