JSFiddle - React, Tailwind, and code Playground

Bootstrap Grid/List Toggle

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<span class="toggler active" data-toggle="grid"><i class="fa fa-th"></i></span>
<span class="toggler" data-toggle="list"><i class="fa fa-list"></i></span>

<ul class="surveys grid">
    <li class="survey-item">
        <span class="survey-country list-only"><a href="">TimeZone</a></span>
        <span class="survey-name"><a href="">Assigning Tasks Bug</a></span>
        <span class="survey-country grid-only">Category: <a href="">TimeZone</a></span>

        <div class="pull-right">
            <span class="survey-progress">
                <span class="survey-progress-bg">
                    <span class="survey-progress-fg" style="width: 50%;"></span>
                </span>
                <span class="survey-progress-labels">
                    <span class="survey-progress-label">50%</span>
                    <span class="survey-completes grid-only">
                        <a href=""><i class="fa fa-check-square-o"></i></a>
                        <a href=""><i class="fa fa-pencil"></i></a>
                        <a href=""><i class="fa fa-times-circle"></i></a>                    
                    </span>
                </span>
            </span>
            
            <span class="survey-end-date">Date Due: 2014-12-31</span>
            <span class="survey-desc grid-only">This is a shortened description of the posted bug...</span>
            <span class="survey-stage list-only">
                <a href=""><i class="fa fa-check-square-o"></i></a>
                <a href=""><i class="fa fa-pencil"></i></a>
                <a href=""><i class="fa fa-times-circle"></i></a>
            </span>
        </div>
    </li>

    <li...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300, 400, 700);

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background: #f5f5f5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    font-family:'Lato', sans-serif;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.004);
    font-size: 100%;
    font-weight: 400;
}
.toggler {
    color: #A1A1A4;
    font-size: 14px;
    margin-left: 8px;
    text-align: center;
    cursor: pointer;
}
.toggler.active {
    color: #000;
}
.surveys {
    list-style: none;
    margin: 0;
    padding: 0;
}
.survey-item {
    display: block;
    margin-top: 10px;
    padding: 20px;
    border-radius: 2px;
    background: white;
    box-shadow: 0 2px 1px rgba(170, 170, 170, 0.25);
}
.survey-name {
    font-weight: 400;
}
.list .survey-item {
    position: relative;
    padding: 0;
    font-size: 14px;
    line-height: 40px;
}
.list .survey-item .pull-right {
    position: absolute;
    right: 0;
    top: 0;
}
@media screen and (max-width: 800px) {
    .list .survey-item .stage:not(.active) {
        display: none;
    }
}
@media screen and (max-width: 700px) {
    .list .survey-item .survey-progress-bg {
        display: none;
    }
}
@media screen and (max-width: 600px) {
    .list .survey-item .pull-right {
        position: static;
        line-height: 20px;
        padding-bottom: 10px;
    }
}
.list .survey-country, .list .survey-progress, .list .survey-completes, .list .survey-end-date {
    color: #A1A1A4;
}
.list .survey-country, .list .survey-completes, .list .survey-end-date, .list .survey-name, .list .survey-stage {
    margin: 0 10px;
}
.list .survey-country {
    margin-right: 0;
}
.list .survey-end-date, .list .survey-completes, .list .survey-country, .list .survey-name {
    vertical-align: middle;
}
.list .survey-end-date {
    display: inline-block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
}
.survey-stage .stage {
    display: inline-block;
   ...

JavaScript

(function () {
    $(function () {
        return $('[data-toggle]').on('click', function () {
            var toggle;
            toggle = $(this).addClass('active').attr('data-toggle');
            $(this).siblings('[data-toggle]').removeClass('active');
            return $('.surveys').removeClass('grid list').addClass(toggle);
        });
    });

}).call(this);