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

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.

<html lang="en">
    <head>
        <title>My first styled page</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimal-ui">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" />
        <style>
            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 >
            <div >
                <div >
                    <div >menu</div>
                    <div >picture</div>
                </div>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
    </body>
</html>

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.

CodePudding user response：

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