Show 1 row on desktop and 2 rows on mobile


Tags: css,twitter-bootstrap

Problem :

This basic bootstrap CSS shows me 4 columns on 1 row:

<div class="row">
    <div class="col-md-3">
        Text
    </div>
    <div class="col-md-3">
        Text
    </div>
    <div class="col-md-3">
        Text
    </div>
    <div class="col-md-3">
        Text
    </div>
</div>

For the mobile view I would like to display 2 columns on 2 rows. The only way that I know how to do this is to create the same content twice ... something like this:

<div class="desktop">
    <div class="row">
        <div class="col-md-3">
            Text
        </div>
        <div class="col-md-3">
            Text
        </div>
        <div class="col-md-3">
            Text
        </div>
        <div class="col-md-3">
            Text
        </div>
    </div>
</div>

<div class="mobile">
    <div class="row">
        <div class="col-xs-6">
            Text
        </div>
        <div class="col-xs-6">
            Text
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            Text
        </div>
        <div class="col-xs-6">
            Text
        </div>
    </div>
</div>

So you can set display:none for the classes desktop and mobile using @media ...

That would work but it is not the cleanest solution. Would there be another way to do this?



Solution :

You don't have to write separate code for smaller devices and larger devices. Following code snippet will serve your purpose.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-3 col-xs-6">
    1
  </div>
  <div class="col-md-3 col-xs-6">
    2
  </div>
  <div class="col-md-3 col-xs-6">
    3
  </div>
  <div class="col-md-3 col-xs-6">
    4
  </div>
</div>


    CSS Howto..

    how to make a stretchable blog header

    How to get multiple rotating background cover with css / Full screen slideshow

    asp.net mvc view css not showing as expected

    How can I make this HTML5 canvas progress bar fill from the bottom up instead of the top down?

    How to add this element in jquery

    How can I create a nav bar with a repeat image inside?

    how can I set my gradient background in css for full width and height of the page?

    How to make Visual Studio stop “compiling” .js and .css files

    How can I align an image to the center in a Bootstrap column?

    How can I find which file or code affected to my code in html, css

    How to download an Html page and its internal files in android?

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    PrimeFaces: how to override CSS class

    How can I use a data attribute to set a background-image in CSS?

    How to layout these elements via HTML/CSS circumventing DOMPDF's lack of float?

    How to place the text in the top right corner and not show buttons when printing

    How to test css with media queries

    How to select all cell starting, containing or ending with some word with JQuery/CSS?

    How do you mimic multi row horizontal scroll table behavior with CSS and Divs?

    How to load a apply jQuery function upon appending a
    via Ajax?

    How would I name this HTML code so I could edit it with CSS? [closed]

    How to prevent CSS table-cell content expanding to full height of row

    How can I use CSS to keep content in its own column?

    jQuery - How to make images overlap when fading in and out?

    How do I create a CSS class Union?

    how to clip text in css like gmail does to emails subject listings

    How to set ribbon on image by stacking it in a div?

    How would you code this: Grid-breaking shapes

    How to place div on top of responsive rotated div?

    How do I force an image to be responsive using CSS so it stays in the same position?