Home Having issue pushing the left column to bottom for tablet and ipad with portrait mode – Bootstrap 5

Questions

Having issue pushing the left column to bottom for tablet and ipad with portrait mode – Bootstrap 5

byMR

February 1, 2023

I am trying to push the left column to bottom on a tablet or ipad with portrait mode, but having difficulty with it.

The following picture highlights what I would like to achieve and what the issue now.

My first styled page

html {
overflow: hidden;
width: 100%;
}

        body {
            position: fixed;
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }

        .album-size {
            width: 100%;
            height: 100%;
        }

        .wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .col-sm-1 {
            background-color: #453f3c;
        }

        .col-sm {
            background-color: #554d49;
        }

        .col-sm-1 {
            height: 70px;
        }

        .col-sm {
            height: calc(100% - 70px);
        }

        @media screen and (min-width:1024px),
        screen and (orientation:landscape) {
            .col-sm-1 {
                width: 70px;
                height: 100%;
            }

            .col-sm {
                width: calc(100% - 70px);
                height: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="container-fluid album-size d-flex flex-column">
            <div class="row flex-grow-1">
                <div class="col-sm-1 order-sm-first order-last">menu</div>
                <div class="col-sm">picture</div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
</body>

I would like to push the left column to bottom when both mobile and tablet (including ipad) are in portrait mode. Further, I like to keep the behavior similar to desktop when the devices are in landscape mode.

>Solution :

To push the left column to the bottom in portrait mode for tablet and iPad, you can add a media query for these specific devices and change the "order" property of the columns
Eg:

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
  
    .col-sm-1 {
        order: 2;
    }
    .col-sm {
        order: 1;
    }
}

This media query targets devices with a screen width between 768px and 1024px in portrait mode, which includes most tablets and iPads
the code changes the order of the columns so that the "menu" column is displayed after the "picture" column, effectively pushing it to the bottom