I need help with creating three divs with equal width, where the third div expands to full width below a 991px breakpoint. Additionally, I want all the divs to stack upon each other when the browser width is below 767px. I also require equal margins between the divs and at the edges. Is there a way to achieve this using just CSS without any frameworks?
Below is the CSS code snippet:
* {
box-sizing: border-box;
}
h1 {
margin: 25px;
text-align: center;
}
div[class|=col] {
position: relative;
margin-bottom: 10px;
border: 1px solid black;
}
html,
body {
margin: 15px;
}
.title {
border-left: 1px solid black;
border-bottom: 1px solid black;
width: 25%;
position: absolute;
top: 0px;
right: 0px;
color: black;
text-align: center;
}
#Title1 {
background-color: orange;
}
#Title2 {
background-color: white;
}
#Title3 {
background-color: green;
}
p {
background-color: gray;
width: 100%;
margin: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 25px;
font-family: Helvetica;
color: black;
}
.row {
width: 100%;
}<div class="row">
<div class="col-lg-4 col-md-6 ">
<section id="Title1" class="title">Chicken</section>
<p>Some text</p>
</div>
<div class="col-lg-4 col-md-6">
<section id="Title2" class="title">Beef</section>
<p>Some text</p>
</div>
<div class="col-lg-4 col-md-12">
<section id="Title3" class="title">Sushi</section>
<p>Some text</p>
</div>
</div>