How can I make my blog page CSS sections responsive for mobile viewing?

[Cpinner]

Hello Technicals! 

So I've been trying to make our Blog page responsive for when it's being viewed on mobile devices. The issue that I'm running into is that I can't figure out where and how to add the "@ media query" instructions for the specific <div>s .

The site I coded creates a layout of 3 Rows with 2 Columns. but I would like them to stack into 1 Column of 6 Rows when the browser is at a max hight of 720px. 

Any directions or even video/text links will be appreciated!

Here is a Link to the blog page I'm referring to. I also attached the code of the layout.

https://thechrysalislab.com/blogs/news/as-seen-in-vogue-magazine

- Thanks, William

https://thechrysalislab.com/blogs/news/as-seen-in-vogue-magazine

<div class="vogue">
       <div class="row">
              <div class="column">
                     <div class="image"><img src="https://cdn.shopify.com/s/files/1/0259/4517/8175/files/1_1_480x480.png?v=1620102519" alt="" width="718" height="363"></div>
              </div>
              <div class="column">
                     <div class="text">
<p>VOGUE</p>
<p>Overjoyed to have our signature Viceroy Butterfly mask featured in the September 2020 issue of Vogue magazine! A huge thank you to TipsNTrends photo by Tony Duran.</p>
<p> </p>
                     </div>
              </div>
       </div>
</div>


<div class="instyle">
       <div class="row">
              <div class="column">
                     <div class="image"><img src="https://cdn.shopify.com/s/files/1/0259/4517/8175/files/2_480x480.png?v=1620204480" alt="" width="718" height="363"></div>
              </div>
              <div class="column">
                     <div class="text">
<p>INSTYLE</p>
<p>InStyle magazine featured our Metallic Monarch and Limited Edition Alexander McQueen mask in their December 2020 issue.</p>
<p> </p>
                     </div>
              </div>
       </div>
</div>


<div class="coterie">
       <div class="row">
              <div class="column">
                     <div class="image"><img src="https://cdn.shopify.com/s/files/1/0259/4517/8175/files/3_480x480.png?v=1620206004" alt=""></div>
              </div>
              <div class="column">
                     <div class="text">
<p>COTERIE</p>
<p>Our brand was  featured as a trend leader at the Coterie Digital Trade Event this Spring. Loved being a part of this show among so many other amazing creators!</p>
<p> </p>
                     </div>
              </div>
       </div>
</div>


<div class="MONARCH-EXPERIENCE-AT-THE-COSMO">
       <div class="row">
              <div class="column">
                     <div class="image"><img src="https://cdn.shopify.com/s/files/1/0259/4517/8175/files/4_480x480.png?v=1620206613" alt=""></div>
              </div>
              <div class="column">
                     <div class="text">
<p>MONARCH EXPERIENCE AT THE COSMO</p>
<p>Styled by #EmmaTrask, the Monarch Experience featured at the Cosmopolitan Hotel has been nominated for, and won, numerous awards including the SEGD Global Design Award and the New York Festivals Third Prize Award.</p>
<p> </p>
                     </div>
              </div>
       </div>
</div>

[Kinjaldavra · Accepted solution]

hello @Cpinner  do you want to look like this see screenshot http://prnt.sc/12m6d7u

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 768px){
 .template-article .article .rte .column{
    
    display: unset !important;
    flex-direction: column !important;
    flex-basis: unset !important;
    flex: unset !important;
    flex: 0 0 100% !important;

}
}

[Kinjaldavra · Accepted solution]

hello @Cpinner  do you want to look like this see screenshot http://prnt.sc/12m6d7u

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 768px){
 .template-article .article .rte .column{
    
    display: unset !important;
    flex-direction: column !important;
    flex-basis: unset !important;
    flex: unset !important;
    flex: 0 0 100% !important;

}
}

[Cpinner]

Yes ! Thanks a lot! 

[Hardik29418]

@Cpinner  Thank you for the update.

[Hardik29418 · Accepted solution]

Hello, @Cpinner 

Welcome to the shopify Community.

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

@media only screen and (max-width: 600px) {
.vogue .row .column {
flex: 0 0 100% !important;
}
}