Changing order in flex and removing elements in mobile phone viewing mode

Question

Here is my code and I want to change the order of buttons when we are in the mobile viewing mode. I used "column-reverse" but what if I want them to be like this? button 2 button 3 button 1 How can I customize their order?

My second question is how can i get rid of the "this is a lable" text in mobile viewing mode? I tried "display: none" but since the label class contains all the buttons as well, all the buttons will be removed.

html {
  box-sizing: border-box;
  font-size: 62.5%;
  font-family: 'Georama', sans-serif;
}
body {
  background-color: #555;
  color: #fff;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

button {
  margin: 2rem;
  width: 200px;
  height: 50px;
}

.label {
  font-size: 2rem;
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 600px) {
  .label {
    flex-direction: column-reverse;
  }
}

<!DOCTYPE html>
<html lang="en">
  <html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    </head>
    <body>
      <label class="label">
        this is a label
        <button>Btn 1</button>
        <button>Btn 2</button>
        <button>Btn 3</button>
      </label>
    </body>
  </html>
</html>

To reorder the items (not just change the direction of the row/column), use the [`order` property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#the_order_property) in your media query, not the `flex-direction` property. — D M, Feb 07 '22 at 18:24
Does this answer your question? [Change div order with CSS depending on device-width](https://stackoverflow.com/questions/32829567/change-div-order-with-css-depending-on-device-width) — D M, Feb 07 '22 at 18:25
For the label, you need to wrap the text in a `` with a class. Add `display: none` to the class in your media query to hide it for mobile devices. See [Div show/hide media query](https://stackoverflow.com/questions/11796297/div-show-hide-media-query). — D M, Feb 07 '22 at 18:32

score 0 · Answer 1 · answered Feb 07 '22 at 18:35

You do not have necessarily to use flex-direction: column-reverse

Since you are using flex-box, it is quite easy to determine the order of elements using the order CSS property.

As for the second question, wrap the text in a div and add display: none in the mobile viewing mode.

html:

<label class="label">
    <div>this is a label</div>
    <button>Btn 1</button>
    <button>Btn 2</button>
    <button>Btn 3</button>
</label>

css:

@media only screen and (max-width: 600px) {

 label button:nth-of-type(1) { order: 3; }
 
 label div { display: none; }
}

https://jsfiddle.net/kongallis/jsraL3g9/41/

Changing order in flex and removing elements in mobile phone viewing mode

1 Answers1