JSFiddle - React, Tailwind, and code Playground

HTML

Resize this window for mobile version

<ul class="subcategories clearfix">
                                        <li class="ty-subcategories__item">
                    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/butterfly-sofa-bean-bags/">
                                            <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-butterfly.jpg?t=1437997789" alt="" title="">
                                        </a>
                </li>
                                                <li class="ty-subcategories__item">
                    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/avatar-lounger-bean-bags/">
                                            <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-avatar.jpg?t=1437997872" alt="" title="">
                                        </a>
                </li>
                                                <li class="ty-subcategories__item">
                    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/twin-couch-bean-bags/">
                                            <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-twin.jpg?t=1437998079" alt="" title="">
                                        </a>
                </li>
                                                <li class="ty-subcategories__item">
                    <a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/versa-table-bean-bags/">
                                            <img class="ty-pict  ty-subcategories-img  " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-versa.jpg?t=1437998061" alt="" title="">
                                        </a>
                </li>
                                                            <li...

CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

img { width: 200px; }

ul li {
    display: inline-block;
    width: 45%;
}


@media all and (max-width: 600px) {
    ul li {
        position: relative;
        height: 65px;
        width: 100%;
    }
    
    ul li:nth-child(4n - 2) {
        top: 69px;
    }
    
    ul li:nth-child(4n - 1) {
        top: -69px;
    } 
}