What I wish to do is create an nth-child expression to remove the margin-bottom of on the last row when in desktop view and just remove margin-bottom of last item in responsive view, here an example or you can check **[live demo here](http://codepen.io/thehung1724/full/jEMGdj/)**

**HTML**

```
<div id="wrapper">
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
</div>  <!-- end wrapper -->

```

**CSS**

```
.box{
    border: 1px solid  #DFDFDF;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
}

```

So I try below code:

```
.col-md-3:nth-last-child(-n+4) .box {
     margin-bottom: 0;
}

```

It works perfectly in large view, but when display in responsive view it doesn't work. Hope anyone can give me advice.