Media Query and Flex box

HTML-CSS
1

I try to change the layout of my elements, by combining bootstrap and media query. For a size large enough, my items are on row (using bootstrap). However for a window size below 768px I try to use the media query to put my elements in column (Using media query). But my I do not observe the change

<div id="card" class="container-md-fluid row"> <!--Container-->
            <div id="me" class="col-4"> <!--Child-->
                <div id="sub-me" class="d-flex flex-column justify-content-between">
                    <span>
                        <i class="fas fa-code"></i><span>Tiffane.me</span>
                    </span>
                    <header>
                        <div id="subhead">
                            <span>Hello</span>
                            <h1>I'm TFFANE</h1>
                        </div>
                        <button>DISCOVER ME</button>
                        <p>Developpeur Freelance fullstack de site et d'appli web</p>
                    </header>
                    <div id="reseaulink" class="d-flex justify-content-evenly">
                        <i class="fab fa-facebook"></i>
                        <i class="fab fa-whatsapp"></i>
                        <i class="fab fa-facebook-messenger"></i>
                        <i class="fab fa-linkedin-in"></i>
                    </div>
                </div>
            </div>
            <div id="presentation" class="col-7 d-flex flex-column"><!--Child-->
                <div id="img" >
                    <img src="me.jpg" alt="photo de moi">
                </div>
                <aside>
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis explicabo maxime deserunt qui laboriosam alias ullam architecto minima porro eos voluptate, hic eligendi ea sint magnam praesentium neque inventore eius.
                    </p>
                </aside>
            </div>
            <div id="link" class="col-1"><!--Child-->
                <nav>
                    <ul>
                        <a href="#"><li href="#">HOME</li></a>
                        <a href="#"><li href="#">ABOUT ME</li></a>
                        <a href="#"><li href="#">PORTFOLIO</li></a>
                        <a href="#"><li href="#">CONTACT</li></a>
                    </ul>
                </nav>
            </div>
        </div>


@media all and (max-width: 768px){
    #card{
        display: flex;
        flex-direction: column;
    }
}

Capture d’écran de 2020-12-31 22-15-53
Capture d’écran de 2020-12-31 22-15-53566×539 87.1 KB

2

It’s been a while since I’ve worked with Bootstrap, but I think normally you wouldn’t use a media query, but instead set the column size of your child divs to something like this:

<div class="col-12 col-md-4">

This column would take up a whole row on small devices, and one third (4/12 columns) from medium size devices upwards.

3

This will only resize the size of my divs for smaller screens … But I mainly want to arrange my divs in column and not in row as is currently the case

4

I might be misunderstanding, but if the child divs each take up the whole horizontal space, isn’t that essentially the same as setting the container to flex-direction: column ?

5

  1. container-md-fluid is not a valid class. You can always check if a class is being applied by using the dev tools. fluid is always 100%, container-md is 100% up until the md breakpoint.

  2. containers are not rows, containers contain rows, and rows contain columns.

<div class="container">
  <div class="row">
    <div class="col-md text-center">col-md</div>
    <div class="col-md text-center">col-md</div>
    <div class="col-md text-center">col-md</div>
  </div>
</div>
  1. As already said, if you add breakpoints to your columns they should stack.

This should start out horizontally and stack at the md breakpoint:

Example 
<!-- Container -->
<div id="card" class="container-md">
  <!-- Row -->
  <div class="row">
    <!-- Columns -->
    <div id="me" class="col-md-4">
      <!--Child-->
      <div id="sub-me" class="d-flex flex-column justify-content-between">
        <span>
          <i class="fas fa-code"></i><span>Tiffane.me</span>
        </span>
        <header>
          <div id="subhead">
            <span>Hello</span>
            <h1>I'm TFFANE</h1>
          </div>
          <button>DISCOVER ME</button>
          <p>Developpeur Freelance fullstack de site et d'appli web</p>
        </header>
        <div id="reseaulink" class="d-flex justify-content-evenly">
          <i class="fab fa-facebook"></i>
          <i class="fab fa-whatsapp"></i>
          <i class="fab fa-facebook-messenger"></i>
          <i class="fab fa-linkedin-in"></i>
        </div>
      </div>
    </div>
    <div id="presentation" class="col-md-7 d-flex flex-column">
      <!--Child-->
      <div id="img">
        <img src="me.jpg" alt="photo de moi">
      </div>
      <aside>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis explicabo maxime deserunt qui laboriosam alias ullam architecto minima porro eos voluptate, hic eligendi ea sint magnam praesentium neque inventore eius.
        </p>
      </aside>
    </div>
    <div id="link" class="col-md-1">
      <!--Child-->
      <nav>
        <ul>
          <a href="#">
            <li href="#">HOME</li>
          </a>
          <a href="#">
            <li href="#">ABOUT ME</li>
          </a>
          <a href="#">
            <li href="#">PORTFOLIO</li>
          </a>
          <a href="#">
            <li href="#">CONTACT</li>
          </a>
        </ul>
      </nav>
    </div>
  </div>
</div>