With the new Bootstrap 4 transitioning from using 'floating' elements to the improved 'flexbox' method, I can't help but wonder if it's acceptable to build the entire grid structure using .d-flex instead of the conventional .container .row .col approach.
Since both methods are essentially based on flexbox, I see no downside in substituting one for the other. In fact, I find that .d-flex requires fewer CSS class names and enhances readability within the HTML code.
There are several reasons why I favor d-flex over the old col:
Horizontal and vertical flexibility - d-flex allows for creating elements both horizontally (.flex-row) and vertically (.flex-column), while col only supports horizontal layouts.
Inline element adaptability - The element's width will inherit from the child and can be dynamically aligned using d-inline-flex. In contrast, col grids have fixed widths.
Advanced re-ordering capabilities - d-flex utilizes .order-x classes while col uses .push and .pull. Personally, I find d-flex more intuitive as the order of elements is represented through numbering, whereas the numbers in .col indicate how many grids are being pushed or pulled away from the previous state. This can get convoluted when working on a complex website.
Feel free to correct me if I'm mistaken.