Bootstrap - have a string only on a small device

Question

For my plans page, I use panels containing the content of what each plan offers.

The problem I am facing is that each panel is different in size, when you view it on a mobile device, 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 this, it looks like this on large screens:

How can I reach 2 small small screens and 4 large large screens without having to repeat my code and use hidden * and visible- * for strings?

Here download this page: http://www.bootply.com/POHPsCRmmM

Answer 1

Here you go:

Bootply

I earned by separating the two left div and the other two div in their respective containers. Then I used a combination of col-lg , col-md and col-sm to achieve the desired effect:

  <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 this works for you!

Answer 3

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

Bootstrap columns are based on float: left , so you get a weird layout when the column wraps and the left column are higher than the right. In this case, the browser tries to put it to the right, if space permits, before moving it to the next line.

You did not want to copy your columns and use visible / hidden classes, however there is another option for using visible / hidden classes that use the fact that these are floating containers. CSS has the clear property to force the container to move below all floating containers (the left value moves it below all left floating, <T23> below all right floating and both below all floating, left or right), so you can insert the following between your columns:

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

You will get the same effect, but with less complexity, although perhaps not the most kosher way to download.