In small screen wrap from left css

March 17, 2022

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

>Solution :

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