'In small screen wrap from left css

I have two buttons like [button_2] [button_1] in my screen after I make the screen smaller they place in a column like below

[button_2]
[button_1]

but I want the opposite in small screen I want it to wrap from left and have it like below .

[button_1]
[button_2]

and the code is :

 @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;
    }
  }
}
cssresponsive


Solution 1:[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>

Solution 2:[2]

.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.

Solution 3:[3]

You could either use flex-direction like stated by @Huy Pham or you could use order (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#the_order_property) to move elements to first place

button1 {
  order: 0

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

button2 {
  order: 1

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

or mentioned flex-direction (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) like so:

buttonGroup {
  flex-direction:column;

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Huy Ph?m
Solution 2 Elikill58
Solution 3

Related Questions