Building a small responsive web design for desktop view, tablet view, and mobile

Issue

I am new to coding and trying to figure out how to use HTML, CSS and media queries together, to create a 3 item menu of equal containers side by side in desktop view.

In tablet view the menu items shift to 2 menu items staying on the first row and the 3rd menu item shifting to the second row but spans the length of the 2 menu items on the first row.

In mobile view all 3 menu items are stacked one on top of the other. See images below. My breakpoints for desktop are 992px or greater, tablet view is 768px and 991px, and mobile is 990px or less.

I have written the following HTML and CSS in an attempt to duplicate what the images are showing. My menu items do not respond to the media queries I put in my css file. I can only use basic responsive framework for the project.

Any help or guidance would be appreciated.

* {
  box-sizing: border-box;
}

h1 {
  font-family: calibri, sans-serif;
  width: 100%;
  margin: 10px;
  text-align: center;
}

div.container1 {
  background-color: #A0A0A0;
  font-family: calibri, sans-serif;
  width: 400px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  overflow: hidden;
}

div.container2 {
  background-color: #A0A0A0;
  font-family: calibri, sans-serif;
  width: 400px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  overflow: hidden;
}

div.container3 {
  background-color: #A0A0A0;
  font-family: calibri, sans-serif;
  width: 400px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  overflow: hidden;
}

div#menu1 {
  font-family: calibri, sans-serif;
  height: 20px;
  width: 125px;
  background-color: #FF66B2;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #000000;
  font-weight: bold;
}

div#menu2 {
  font-family: calibri, sans-serif;
  height: 20px;
  width: 125px;
  background-color: #990000;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
}

div#menu3 {
  font-family: calibri, sans-serif;
  height: 20px;
  width: 125px;
  background-color: #FFE5CC;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #000000;
  font-weight: bold;
}

p {
  font-family: calibri, sans-serif;
  margin-left: 10px;
  margin-right: 10px;
}


/* For tablets and large phones: */

@media (min-width: 768px) and (max-width: 991px) {
  background-color: green;
  .col-m-1 {
    width: 25%;
  }
  .col-m-2 {
    width: 25%;
  }
  .col-m-3 {
    width: 50%;
  }
}


/* For Desktop */

@media only screen and (min-width:992px) {
  .col-1 {
    width: 33.33%;
  }
  .col-2 {
    width: 33.33%;
  }
  .col-3 {
    width: 33.33%;
  }
}

<h1>Our Menu</h1>

<div class="container1 .col-1 .col-m-1">
  <div id="menu1">Chicken</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor
  </p>
</div>

<div class="container2 .col-2 .col-m-2">
  <div id="menu2">Beef</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor.
  </p>
</div>

<div class="container3 .col-3 .col-m-3">
  <div id="menu3">Sushi</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor.
  </p>
</div>

Desktop:

Tablet:

Mobile:

Solution

I reworked your code a bit and did this using flexbox and nth-child selectors. Exactly what you asked for in the 3 sample screenshots, done with a mobile first approach.

* {
  box-sizing: border-box;
}
    
h1 {
  font-family: calibri, sans-serif;
  width: 100%;
  margin: 10px;
  text-align: center;
}

.flex-container .item {
  background-color: #A0A0A0;
  border: 1px solid black;
  font-family: calibri, sans-serif;
  margin: 1rem;
  overflow: hidden;
  padding: 1rem;
}
.flex-container .item .menu {
  height: 20px;
  width: 125px;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #000000;
  font-weight: bold;
  
  transform: translate(1rem, -1rem)
}
.flex-container .item:nth-child(3n+1) .menu {
  background-color: #FF66B2;
}
.flex-container .item:nth-child(3n+2) .menu {
  background-color: #990000;
  color: white;
}
.flex-container .item:nth-child(3n+3) .menu {
  background-color: #FFE5CC;
}

.flex-container .item > *:nth-child(2) {
  margin-top: 0;
}
.flex-container .item > *:nth-last-child(1) {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-container .item {
    width: calc(50% - 2rem);
  }
  .flex-container .item:nth-child(3n+3) {
    width: calc(100% - 2rem);
  }
}
@media (min-width:992px) {
  .flex-container .item,
  .flex-container .item:nth-child(3n+3){
    width: calc((100% / 3) - 2rem);
  }
}

<h1>Our Menu</h1>

<div class="container flex-container">
  <div class="item">
    <div class="menu">Chicken</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
  <div class="item">
    <div class="menu">Beef</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
  <div class="item">
    <div class="menu">Sushi</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
  <div class="item">
    <div class="menu">Chicken</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
  <div class="item">
    <div class="menu">Beef</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
  <div class="item">
    <div class="menu">Sushi</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
</div>

Answered By - Simp4Code