Bootstrap - have row only on small device

Question

For my plans page I am using panels that contain content of what each plan offers.

The problem I am having is because each panel is a different size, when you view on mobile it looks like this:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 1 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 2 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 3 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 4 --> </div>
    </div>
</div>

I want it to look like this:

<!-- This is how I attempted to do it -->
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 1 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 2 --> </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 3 --> </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="panel"> <!-- Panel 4 --> </div>
    </div>
</div>

But when I do it like that, it looks like this on large screens:

How can I achieve 2 col- on small screens and 4 col- on large screens without having to repeat my code and use hidden-* and visible-* for the rows?

Here is a bootply of this page: http://www.bootply.com/POHPsCRmmM

Answer 1

Here you go:

Bootply

I got it to work by splitting the left two div elements and right two div elements in their own respective containers. Then I used a combination of col-lg,col-md, and col-sm to achieve the effect you wanted:

        <div class="letter-space">
            <div class="row">
              <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center">
                  <div class="panel panel-default">
                        <div class="panel-heading purple">
                            <h1 class="panel-title fat">Free</h1>
                            <small>$0 <i>for life</i></small>
                        </div>
                        <div class="panel-body grey">
                            Full access
                            <hr class="hr-line">
                            New free sounds every month
                            <hr class="hr-line">
                            <div class="click" tooltips="" tooltip-html="<center><strong>Free support in our forums</strong> <br> support.resonanceinn.com</center>" tooltip-size="small">
                                <span>Community Support</span>
                            </div>
                            <hr class="hr-line">
                            <a class="btn btn-primary-white btn-lrg btn-block margin-top" href="/register">Free</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center text-center">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1 class="panel-title fat letter-space">Deluxe</h1>
                            <small>$9.99 / <i>month</i></small>
                        </div>
                        <div class="panel-body">
                            30 sounds a month
                        </div>
                    </div>
                </div>
              </div>


         <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1 class="panel-title fat letter-space">Suite</h1>
                            <small>$19.99 / <i>month</i></small>
                        </div>
                        <div class="panel-body">
                            300 Sounds a month
                        </div>
                    </div>
                </div>


                <div class="col-md-6 col-sm-12 col-nopadding padding-top padding-bottom text-center">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1 class="panel-title fat letter-space">Penthouse</h1>
                            <small>$199 / <i>year</i></small>
                        </div>
                        <div class="panel-body">
                            Unlimited
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
    </div>

Answer 2

Try something like this:

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="panel"> <!-- Panel 1 --> </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="panel"> <!-- Panel 2 --> </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="panel"> <!-- Panel 3 --> </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="panel"> <!-- Panel 4 --> </div>
        </div>
    </div>
</div>

bootply: http://www.bootply.com/G9NGCPoOKe

Hope it works for you!

Answer 3

This is a somewhat old question, and it already has an accepted answer; I wanted a bit more fluid design (and my use case doesn't really match yours) so I came up with a different solution, just wanted to record it here for posterity.

Bootstrap columns are based on float: left, which is why you're getting the weird layout when the columns wrap and the left column is taller than the right. In this case the browser tries to place it further right, if space permits, before moving it to the next line.

You didn't want to copy your columns and use visible/hidden classes, there is however another option using visible/hidden classes that leverage the fact that these are floating containers. CSS has the property clear to force a container to be moved below all floating containers (the value left moves it below all left floating, right below all right floating and both below all floating, left or right). So you can insert the following between your column-pairs:

<div class="visible-sm visible-xs" style="clear: both;"></div>

You'll get the same effect, but with less complexity, although maybe not the most kosher bootstrap way.