Changing grid size from css - css

Question

There is an area with equally sized grids. I cannot change the html code anymore but my client wants me to have the middle grid in a different size, so he wants something like col-md-3 col-md-6 col-md-3. Is there anyway to do it through css?
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>

Answer 1

You can do this in different ways and the approach depends on how you want the elements renders. I will assume you want to display the three elements on a single row for desktop and on mobile.
For Bootstrap 3 use
<div class="col-xs-3"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>
This will force the 3 divs to appear on same row for both desktop and mobile. For Bootstrap 4 use you can do the same thing like below.
<div class="col-3"></div>
<div class="col-6"></div>
<div class="col-3"></div>
If you are not using bootstrap, you can use the following Flex css property.
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
<div class="col1"></div>
</div>
<style>
.row {
width: 100%;
display: flex;
flex-direction: row;
}
.col {
width: 25%;
height: 100px;
background: #ccc;
text-align: center;
}
.col2 {
width: 50%;
height: 100px;
text-align: center;
background: #666;
}
</style>
You can take a look at the solution on this link: https://codepen.io/sirwhite/pen/arXoXG
You can also do this using css grid. checkout the https://www.w3schools.com/css/css_grid.asp

Answer 2

You can add here an extra parent class to all columns, without editing the columns the new suggested layout can be achieved by using simple CSS only.
#media (min-width: 1200px) {
.cstm-col .col-md-3 {
width: 25%;
}
.cstm-col .col-md-6 {
width: 50%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Default Bootstrap Grid</h3>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<h4>.col-md-4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<h4>.col-md-4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<h4>.col-md-4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
</div>
<style>
#media (min-width: 1200px) {
.cstm-col .col-md-3 {
width: 25%;
}
.cstm-col .col-md-6 {
width: 50%;
}
}
</style>
<h3>Custom Bootstrap Grid</h3>
<div class="row cstm-col">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-4">
<h4>.col-md-3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">
<h4>.col-md-6</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-4">
<h4>.col-md-3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
</div>