Change order of absolute buttons in relative div

user_8176014 0
Viewed 218

I have two buttons (in the status column) position as absolute in a relative div, but when the screen gets smaller, the two button override itself.

Is there a way to change their order?

Actually I want to use flex and order to change which button get at top, but I can't get it done.

Tailwind cdn doen't work so well, but I create the pen anyway, see comment below.

tailwind-css css html
1 Answers

            <!DOCTYPE html>
            <html lang="en">

            <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>Document</title>
              <style>
                body {
                  position: relative;
                }

                .absolute-div {
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 100%;
                  height: 10%;
                }

                .flex-div {
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                }

                .flex-div button {
                  width: 33%;
                }


                @media screen and (max-width: 992px) {
                  .flex-div {
                    flex-direction: column;
                  }

                  .flex-div button:nth-child(1) {
                    order: 3
                  }

                  .flex-div button:nth-child(2) {
                    order: 1
                  }

                  .flex-div button:nth-child(3) {
                    order: 2
                  }

                }
              </style>
            </head>

            <body>
              <div class="absolute-div">
                <div class="flex-div">
                  <button>btn1</button>
                  <button>btn2</button>
                  <button>btn3</button>

                </div>


              </div>
            </body>

            </html>

I wrote a sample example to use flexbox on the absolutely positioned element to change the order of the flex items for the devices 990px below width. 

     <!DOCTYPE html>
        <html lang="en">

        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
            body {
              position: relative;
            }

            .absolute-div {
              position: absolute;
              top: 0;
              right: 0;
              width: 100%;
              height: 10%;
            }

            .flex-div {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
            }

            .flex-div button {
              width: 33%;
            }


            @media screen and (max-width: 992px) {
              .flex-div {
                flex-direction: column;
              }

              .flex-div button:nth-child(1) {
                order: 3
              }

              .flex-div button:nth-child(2) {
                order: 1
              }

              .flex-div button:nth-child(3) {
                order: 2
              }

            }
          </style>
        </head>

        <body>
          <div class="absolute-div">
            <div class="flex-div">
              <button>btn1</button>
              <button>btn2</button>
              <button>btn3</button>

            </div>


          </div>
        </body>

        </html>
user_87053680
Related