I'm having a little trouble arranging divs next to each other on a page. Specifically, I want to ensure that if there is only one instance of the col-xs-12 col-md-6 div class on the page, it should take up the full width (100%) instead of just 50%. The HTML code is fixed as it is being generated by MVC. Is there a way to achieve this using CSS or JavaScript/jQuery? I attempted to use the following JavaScript snippet, but it didn't work as expected.
Below is an example of my HTML and CSS:
<div class="col-xs-12 col-md-6 textcontent">
</div>
<div class="col-xs-12 col-md-6 service">
</div>
<div class="col-xs-12 col-md-6 textcontent">
</div>
CSS
.col-md-6{
width: 50%;
}
JavaScript
if ($('.col-xs-12.col-md-6').length == 1) {
$('.col-xs-12.col-md-6').toggleClass(".col-xs-12.col-md-12")
}