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..

    I have a standard table with text inside. How do I vertical align this?

    Show header below fixed nav when clicking hash tag link

    How to allow user to switch back to standard view from a mobile device (CSS) [duplicate]

    How to make content of invisible except for the left column?

    How can the common text message format be replicated purely with CSS?

    How to horizontally align to “block” divs inside a div?

    How do I get a computed style?

    How to make a smoother animation with jQuery UI slide effect

    How can I make one item with its own class a different colour from others?

    How Do I Remove a CSS Value

    ASP.NET: How to set the css class of a Control during DataBind?

    how to make background fit on screen bootstrap3

    How to make an image always load in the center of page?

    How to center image while also aligning text to the right of image?

    how to locate an element by value using css selector in webdriver?

    How to make a glyphicon work as a submit button?

    How can I include conversion from LESS to CSS in my ANT build file without including an extra Rhino .jar?

    How do I have fieldset::before rule account for the legend?

    Show Pinterest hover buttons only on images with specified class

    How to shift divs “up” in an order after deleting hiding a div with jquery/css

    How can I best port a frame-based “HTML of yesteryear” application to modern CSS(3)? [closed]

    How to align text in line with icons?

    How to remove the lines that are being generated beneath my bootstrap navbar

    How to make transparent arrow? [duplicate]

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?

    How to make CSS menu bar activated only after my mouse cursor is at the menu.

    How to move images in a grid box?

    Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

    how to make cross browser css ellipsis?

    How can I get the CSS-Transforms to work