Stretching a box in responsive web design - html

Question

I am trying to design a responsive web design using media queries, while doing so I have designing this for both large and medium size devices, everything is working perfectly fine but for the medium size device when I squeeze my browser below 992 pixels the box with the title sushi comes down and takes the space of 50% as specified in the media query code, but I want it so that when it comes down it stretches the full browser width.
I tried to do by specifying sushi class in a media-query and setting width to 196% but that didn't work as it should with responsive design.
* {
box-sizing: border-box;
}
h1 {
font-weight: bold;
font-size: 2em;
text-align: center;
}
.chicken {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box1title {
border: 2px solid black;
background-color: pink;
width: 88px;
float: right;
}
.b1content {
text-align: center;
}
.beef {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box2title {
border: 2px solid black;
background-color: rgb(170, 57, 57);
width: 88px;
float: right;
}
.b2content {
text-align: center;
}
.sushi {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box3title {
border: 2px solid black;
background-color: rgb(255, 255, 170);
width: 88px;
float: right;
}
.b3content {
text-align: center;
}
p {
clear: both;
padding: 5px;
}
.container {
width: 100%;
}
#media(min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.83%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 66.66%;
}
.col-lg-8 {
width: 74.99%;
}
.col-lg-9 {
width: 8.83%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}
.col-md-1 {
width: 8.83%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
clear: right;
}
.col-md-7 {
width: 66.66%;
}
.col-md-8 {
width: 74.99%;
}
.col-md-9 {
width: 8.83%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
<div class="container">
<div class="col-lg-4 col-md-6">
<div class="chicken">
<div class="box1title">
<div class="b1content">Chicken</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="beef">
<div class="box2title">
<div class="b2content">Beef</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="sushi">
<div class="box3title">
<div class="b3content">Sushi</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
My table with sushi title should stretch to the max when the browser is squeezed to below 992 pixels like the following image.

Answer 1

You can change the col-md-6 for the sushi box to col-md-12 so that when your screen reaches the correct dimensions your container will span all 12 columns:
<div class="col-lg-4 col-md-12"> <!-- <- change col-md-6 to col-md-12 -->
<div class="sushi">
...
</div>
</div>
See example below:
* {
box-sizing: border-box;
}
h1 {
font-weight: bold;
font-size: 2em;
text-align: center;
}
.chicken {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box1title {
border: 2px solid black;
background-color: pink;
width: 88px;
float: right;
}
.b1content {
text-align: center;
}
.beef {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box2title {
border: 2px solid black;
background-color: rgb(170, 57, 57);
width: 88px;
float: right;
}
.b2content {
text-align: center;
}
.sushi {
border: solid 1px black;
background-color: grey;
margin: 10px;
}
.box3title {
border: 2px solid black;
background-color: rgb(255, 255, 170);
width: 88px;
float: right;
}
.b3content {
text-align: center;
}
p {
clear: both;
padding: 5px;
}
.container {
width: 100%;
}
#media(min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.83%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 66.66%;
}
.col-lg-8 {
width: 74.99%;
}
.col-lg-9 {
width: 8.83%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}
.col-md-1 {
width: 8.83%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
clear: right;
}
.col-md-7 {
width: 66.66%;
}
.col-md-8 {
width: 74.99%;
}
.col-md-9 {
width: 8.83%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
<div class="container">
<div class="col-lg-4 col-md-6">
<div class="chicken">
<div class="box1title">
<div class="b1content">Chicken</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="beef">
<div class="box2title">
<div class="b2content">Beef</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="sushi">
<div class="box3title">
<div class="b3content">Sushi</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>

Answer 2

If we change <div class="col-lg-4 col-md-6"> to <div class="col-lg-4"> it will work... Check https://stackblitz.com/edit/js-w2je7d?file=index.html