<div class="container">
  <div class="row">

    <div class="col-sm">
    </div>

    <!-- Key modification: Add flex-column class -->
    <div class="col-sm d-flex justify-content-center flex-column col-sm-8 mt-5">
      <div><h1>Text ??</h1></div>

      <div>
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

    </div>

    <div class="col-sm">
    </div>

  </div>
</div>

Effect explanation: By adding the flex-column class, the parent div now sets flex-direction to column. This means that its children (the two divs where

and

Layout considerations and best practices

1. Understanding the principles of Flexbox: It is crucial to master the working methods of core attributes such as display: flex, flex-direction, justify-content, and align-items. This helps solve layout problems without relying on specific frameworks and makes better use of Bootstrap's Flexbox tool classes.
2. Choose the right container: Not all elements require a Flexbox layout. Block-level elements (such as div, p, h1, form) will themselves be stacked vertically. The container should be set to Flex only when advanced features such as alignment, spacing, and responsive sorting provided by Flexbox are required. In the above example, if you do not need to center horizontally, remove the d-flex directly, and h1 and form will also stack naturally vertically.
3. Responsive design: Bootstrap provides responsive Flexbox classes such as flex-column-sm, flex-column-md, flex-column-lg and flex-column-xl. These classes allow you to dynamically adjust the flex-direction of the Flex container under different screen sizes for a more flexible and responsive layout. For example, you can stack vertically on a small screen and display side by side on a large screen.
4. Avoid over-necking: Complex Flexbox nesting structures may cause style conflicts and increase debugging difficulty. Try to keep the structure of the Flex container and its child elements flattened, or make sure that each layer of Flex container has a clear layout intention.
5. Debugging Tips: When the layout does not meet expectations, utilizing browser developer tools is the best way to troubleshoot problems. Check whether the display attribute of an element is flex, as well as the calculated values ??of Flexbox attributes such as flex-direction, justify-content, and align-items, so as to quickly locate the problem.

Summarize

In Bootstrap's Flexbox layout, understanding the flex-direction attribute and its interaction with classes such as d-flex is the key to achieving accurate layout. When encountering situations where elements are displayed side by side and vertical stacking is expected, it usually means that the flex-direction of the Flex container needs to be changed from the default row to column. This common layout challenge can be solved efficiently and gracefully by simply adding the flex-column class to the Flex container, ensuring that the page content is presented correctly as designed intent. Mastering these basic Flexbox knowledge will greatly improve your web layout capabilities.