'flex-direction: row isn't working in media query

When the screen size hits a certain number of pixels, I'm trying to get my footer columns to turn into rows inside my media query. I'm following along with a tutorial. It doesn't seem to be working, though. I've checked for typos and searched google high and low for answers, but nothing seems to be working. Am I missing something?

  footer{
    background: var(--primary-50);
    padding-top: 5rem;
    padding-bottom: 2rem;
    }

    .footer-wrapper{
     display: flex;
     flex-direction: column;
    gap: 3rem;
    }

    .footer-logo{
    width: 150px;
    margin-bottom: 2rem;
    }

    .footer-desc{
    font-size: 1.4rem;
    color: #360215;
    margin-bottom: 2rem;
    }

    .footer-social-title{
    font-size: 1.8rem;
    color: #360215;
    margin-bottom: 1rem;
    }

     .footer-socials li{
    display: inline-block;
    margin-right: 0.5rem;
    }

    .footer-socials a{
    padding: 0.5rem 0.8rem;
    background-color:#f7e4eb ;
    border: 1px solid var(--primary-300);
    border-radius: 8px;
    }

    .footer-socials svg{
    width: 20px;
    color: var(--black);
    }

    .footer-text-title{
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color:#360215;
    font-weight: 600;
    }

    .footer-text a{
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--black);
    font-family: 'Assistant';
    font-weight: 500;
    line-height: 1.4rem;
    }
    @media only screen and (min-width: 768px){
     footer{
        padding-top: 8rem;
        padding-bottom: 4rem;
      }

    .footer-wrapper {
        flex-direction: row;
    }

    .footer-col1{
        flex: 4;
    }

    .footer-col2{
        flex: 2;
    }

    .footer-desc{
        max-width: 300px;
        font-size: 1.8rem;
        margin-bottom: 2.5rem;
    }

    .footer-social-title{
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .footer-text-title{
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .footer-text a{
       font-size: 1.8rem;
       margin-bottom: 1rem;
      }
    }

<footer>
    <div class="container">
        <div class="footer-wrapper">
            <div class="footer-col1">
                <div class="footer-logo">
                    <img src="./shaif-s-cuisine-starter_files/images/plzwork.svg" alt="Soul Kitchen">
                </div>
                <p class="footer-desc">
                    A passion project full of delicious recipes that remind me of my southern roots.
                </p>
                <div class="footer-socials">
                    <h4 class="footer-social-title">Follow Me!</h4>
                    <ol>
                        <li>
                            <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path
                                        d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
                                </svg>
                            </a>
                        </li>
                    </ol>
                </div>
                <div class="footer-col1">
                    <h3 class="footer-text-title">
                        Links
                    </h3>
                    <ol class="footer-text">
                        <li>
                            <a href="./home.html">Home</a>
                        </li>
                        <li>
                            <a href="./recipes.html">Recipes</a>
                        </li>
                        <li>
                            <a href="./cookterms.html">Cooking Terms</a>
                        </li>
                        <li>
                            <a href="./contact.html">Contact</a>
                        </li>
                        <li>
                            <a href="#">Privacy Policy</a>
                        </li>
                    </ol>
                </div>
                <div class="footer-col2">
                    <h3 class="footer-text-title">
                        Recipes
                    </h3>
                    <ol class="footer-text">
                        <li>
                            <a href="#">Breakfast</a>
                        </li>
                        <li>
                            <a href="#">Lunch</a>
                        </li>
                        <li>
                            <a href="#">Dinner</a>
                        </li>
                        <li>
                            <a href="#">Snacks</a>
                        </li>
                        <li>
                            <a href="#">Desserts</a>
                        </li>
                        <li>
                            <a href="#">Drinks</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</footer>

html css

Solution 1:^[1]

Your example CSS isn't enough information to give you a direct fix that I'm confident will work. At the least, I need to know what's actually happening and have the mark-up also included. However, I can give you this example JSFiddle where I admittedly had to toy with it a lot and make assumptions about the HTML mark-up: https://jsfiddle.net/a9Lxryc6/1/

My best guess is you had your nested row/column items in another object, like the flex footer wrapper was around footer instead of the other way around.

Mark-up from my JSFiddle example (in case it disappears):

<footer>
  <div class="footer-wrapper">
    <div class="footer-logo">
      meh
    </div>
    <div class="footer-col1">
      blah
    </div>
    <div class="footer-col2">
      blah2
    </div>
    <div class="footer-desc">
      blahdesc
    </div>
  </div>
</footer>

CSS remains unchanged.

Solution 2:^[2]

There is something wrong with your HTML. You had not correctly closed the div's. Please check the snippet below.

footer{
    background: var(--primary-50);
    padding-top: 5rem;
    padding-bottom: 2rem;
    }

    .footer-wrapper{
     display: flex;
     flex-direction: column;
    gap: 3rem;
    }

    .footer-logo{
    width: 150px;
    margin-bottom: 2rem;
    }

    .footer-desc{
    font-size: 1.4rem;
    color: #360215;
    margin-bottom: 2rem;
    }

    .footer-social-title{
    font-size: 1.8rem;
    color: #360215;
    margin-bottom: 1rem;
    }

     .footer-socials li{
    display: inline-block;
    margin-right: 0.5rem;
    }

    .footer-socials a{
    padding: 0.5rem 0.8rem;
    background-color:#f7e4eb ;
    border: 1px solid var(--primary-300);
    border-radius: 8px;
    }

    .footer-socials svg{
    width: 20px;
    color: var(--black);
    }

    .footer-text-title{
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color:#360215;
    font-weight: 600;
    }

    .footer-text a{
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--black);
    font-family: 'Assistant';
    font-weight: 500;
    line-height: 1.4rem;
    }
    @media only screen and (min-width: 768px){
     footer{
        padding-top: 8rem;
        padding-bottom: 4rem;
      }

.footer-wrapper {
   flex-direction: row;
}
    .footer-col1{
        flex: 4;
    }

    .footer-col2{
        flex: 2;
    }

    .footer-desc{
        max-width: 300px;
        font-size: 1.8rem;
        margin-bottom: 2.5rem;
    }

    .footer-social-title{
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .footer-text-title{
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .footer-text a{
       font-size: 1.8rem;
       margin-bottom: 1rem;
      }
    }

<footer>
    <div class="container">
        <div class="footer-wrapper">
            <div class="footer-col1">
                <div class="footer-logo">
                    <img src="./shaif-s-cuisine-starter_files/images/plzwork.svg" alt="Soul Kitchen">
                </div>
                <p class="footer-desc">
                    A passion project full of delicious recipes that remind me of my southern roots.
                </p>
                <div class="footer-socials">
                    <h4 class="footer-social-title">Follow Me!</h4>
                    <ol>
                        <li>
                            <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <path
                                        d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
                                </svg>
                            </a>
                        </li>
                    </ol>
                </div>
            </div>
            <div class="footer-col1">
                <h3 class="footer-text-title">
                    Links
                </h3>
                <ol class="footer-text">
                    <li>
                        <a href="./home.html">Home</a>
                    </li>
                    <li>
                        <a href="./recipes.html">Recipes</a>
                    </li>
                    <li>
                        <a href="./cookterms.html">Cooking Terms</a>
                    </li>
                    <li>
                        <a href="./contact.html">Contact</a>
                    </li>
                    <li>
                        <a href="#">Privacy Policy</a>
                    </li>
                </ol>
            </div>
            <div class="footer-col2">
                <h3 class="footer-text-title">
                    Recipes
                </h3>
                <ol class="footer-text">
                    <li>
                        <a href="#">Breakfast</a>
                    </li>
                    <li>
                        <a href="#">Lunch</a>
                    </li>
                    <li>
                        <a href="#">Dinner</a>
                    </li>
                    <li>
                        <a href="#">Snacks</a>
                    </li>
                    <li>
                        <a href="#">Desserts</a>
                    </li>
                    <li>
                        <a href="#">Drinks</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</footer>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	SyrslyTwitch
Solution 2	Suraj Sanwal

'flex-direction: row isn't working in media query

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]