在左侧的小屏幕换行中 css

Question

在我缩小屏幕后，我的屏幕上有两个按钮，例如 [button_2] [button_1] 它们放在如下列中

[button_2]
[button_1]

但我想要在小屏幕上相反，我希望它从左边换行，如下所示。

[button_1]
[button_2]

代码是：

 @media only screen and (max-width: 600px) {
 .buttonGroup {
    display: flex;
    flex-wrap: wrap;
    min-width: 100%;

    .selectProductListButton {
      text-align: center;
      flex: 50%;
      margin-bottom: 10px;
    }
  }
}

Answer 1

.buttonGroup {
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
  min-width: 100%;
}

@media only screen and (max-width: 600px) {
  .buttonGroup {
    flex-direction: column-reverse;
  }
  .selectProductListButton {
    text-align: center;
    flex: 50%;
    margin-bottom: 10px;
  }
}

<div class='buttonGroup'>
  <button type='button' class='selectProductListButton'>Button 1
</button>
  <button type='button' class='selectProductListButton'>Button 2
</button>
</div>

Answer 2

您可以像@Huy Pham 所说的那样使用 flex-direction 或者您可以使用 order (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#the_order_property) 将元素移动到第一位

button1 {
  order: 0

  @media(max-width: 768px) {
    order: 1
  }
}

button2 {
  order: 1

  @media(max-width: 768px) {
    order: 0
  }
}

或像这样提到 flex-direction (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction):

buttonGroup {
  flex-direction:column;

  @media(max-width: 768px) {
    flex-direction:column-reverse;
  }
}

Answer 3

.button_container {
  width:250px;
  height: 100px;
  border: 2px solid black;
  margin: auto;
  display: flex;
  flex-direction: column;
}

button {
  width: 75px;
  margin:5px;
  padding: 2px;
  justify-content: flex-start;
}

<div class="button_container">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

This is codepen link, Maybe this help for you.

在左侧的小屏幕换行中 css

In small screen wrap from left css

css

responsive