Bootstrap last child css changes on page resize - html

Question

So i have a 4 column row in bootstrap and i want to add a divider in between them.
I've added this through the css and made it so .divider-right:last-child has no border. This is fine until you resize the page and it goes from a 4 column grid, to a two column grid.
.divider-right {
border-right:1px solid #dddddd;
}
.divider-right:last-child {
border-right:transparent;
}
<section class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
Content box in here
</div>
<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
Content box in here
</div>
<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
Content box in here
</div>
<div class="col-xs-12 col-sm-6 col-md-3 divider-right">
Content box in here
</div>
</div>
</section>

Answer 1

This should handle removing the border as the viewport is reduced.
Add the appropriate Pseudo Class to the relevant media query.
.row div.divider-right {
border-right: 1px solid #f00;
}
.row div.divider-right:last-child {
border-right: none;
}
#media(max-width:991px) {
.row div.divider-right:nth-child(2n) {
border-right: none;
}
}
#media(max-width:767px) {
.row div.divider-right {
border-right: none;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
<div class="row">
<div class="col-sm-6 col-md-3 divider-right">
<div class="alert alert-info">Content box in here1</div>
</div>
<div class="col-sm-6 col-md-3 divider-right">
<div class="alert alert-info">Content box in here2</div>
</div>
<div class="col-sm-6 col-md-3 divider-right">
<div class="alert alert-info">Content box in here3</div>
</div>
<div class="col-sm-6 col-md-3 divider-right">
<div class="alert alert-info">Content box in here4</div>
</div>
</div>
</section>

Answer 2

i think you want to remove border of second element when it jumps to next div
try this code
#media (max-width:991px) {
.divider-right:nth-child(2n) {
border-right: medium one;
}
}