Search between a Gas Station

Flexbox div is hidden on a small screen I have the following code which uses Bootstrap 4. My CSS is basically a copy of Bootstrap Sign In Form Example. The main difference is that I have a video element in a div that provides border and 1:1 ratio. The issue is that on small displays (e.g. on mobile) the first div is not shown at all, and at least half of the second div with video is hidden too. You can resize your browser window to see it. How can I fix it? I have margin: auto but seems that it doesn't help at all. margin: auto :root { --input-padding-x: .75rem; --input-padding-y: .75rem; } html, body { height: 100%; } body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-ordercode { width: 100%; max-width: 420px; padding: 15px; margin: auto; } .form-ordercode .form-control { position: relative; box-sizing: border-box; height: auto; pad...

Bootstrap 4 ordering class I have a question about the bootstrap 4.1 reordering. According to the documentation: Reordering Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1 .order-md-2 ). Includes support for 1 through 12 across all five grid tiers. .order-1 .order-md-2 I've tried to set the reordering only on small and medium screens, using the .order classes as showed in the docs, but it will reorder the contents also on larger breakpoints, I'm doing this wrong? .order <div class="container-fluid"> <div class="row"> <div class="col-sm-12 col-lg-4 order-sm-2"> <!-- some contents here --> </div> <div class="col-sm-12 col-lg-8 order-sm-1"> <!-- some contents here --> </div> </div> </div> ...