I want the second column that take the entire two rows on full screen, to drop down so the grid only contains one column with 4 rows(1st row being the title of the section, second being the description, and the third and fourth rows the skills) I tried a lot of different stuff but yet non of them make the grid actually drop to 1 column when i resize.

<div >
      <div >
        <span >My Journey So Far</span>
      </div>
      <div >
        <div >
          <div >Java</div>
          <div >UI</div>
          <div >CSS</div>
          <div >UX</div>
          <div >HTML</div>
          <div >GIT</div>
          <div >LINUX</div>
          <div >ADOBE</div>
        </div>
      </div>
      <div >
        <p>
          Always up for a challenge, I have worked for lean start-ups and was a
          member of the first New Zealand start-up to attend Y Combinator, the
          largest start-up accelerator in the world. From there, I worked my way
          up to Art Director and Team Lead at Appster where I oversaw the design
          of 30  mobile and desktop apps. Currently, I lead UI/UX design at SaaS
          start-up VideoMyJob.
        </p>
      </div>
    </div>

.heading {
  font-size: 2.75rem;
  font-weight: 500;
}

.grid-container {
  display: grid;
  grid-template-columns: 50% 20%;
  grid-row-gap: 1rem;
  grid-column-gap: 3rem;
  margin-left: 5%;
  margin-bottom: 8rem;
}

@media only screen and (max-width: 768px) {
  .grid-container {
    display: grid;
    grid-template-columns: 50%;
    grid-template-rows: 1ft 1fr 1fr 1fr;
  }
  .skill-col-container {
    grid-column-start: 1;
    grid-row-start: 4;
  }
}

.skill-col-container {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column: 2;
}

.skill-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
}

.skills {
  text-transform: uppercase;
  display: inline-block;
  border: solid;
  border-radius: 1px;
  border-color: black;
  width: 5rem;
  display: flex;
  justify-content: center;
  border-radius: 3.75rem;
  background-color: #ec9b3b;
}

.p-3 {
  grid-column: 1;
}

CodePudding user response：

Just put your @media at the end of your file. Media queries add no specificity to the selectors they contain, but source order still matters.

You can also refer here: Why does the order of media queries matters in CSS

.heading {
  font-size: 2.75rem;
  font-weight: 500;
}

.grid-container {
  display: grid;
  grid-template-columns: 50% 20%;
  grid-row-gap: 1rem;
  grid-column-gap: 3rem;
  margin-left: 5%;
  margin-bottom: 8rem;
}

.skill-col-container {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column: 2;
}

.skill-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
}

.skills {
  text-transform: uppercase;
  display: inline-block;
  border: solid;
  border-radius: 1px;
  border-color: black;
  width: 5rem;
  display: flex;
  justify-content: center;
  border-radius: 3.75rem;
  background-color: #ec9b3b;
}

.p-3 {
  grid-column: 1;
}

@media only screen and (max-width: 768px) {
  .grid-container {
    display: grid;
    grid-template-columns: 50%;
    grid-template-rows: 1ft 1fr 1fr 1fr;
  }

  .skill-col-container {
    grid-column-start: 1;
    grid-row-start: 4;
  }
}