How to div reverse order with horizontally

August 30, 2023

Trying to div reverse order with horizontally. But not working. How to show div horizontally with reverse order? I have used float right for each dive but not working. How to fix this issue?

app.component.html:

    <div class="wrapper">
      <div class="top">top</div>
      <div class="bottom">bottom</div>
    </div>

app.component.css:

 .wrapper {
   width:100%;
  flex-direction: column-reverse;
  display:  flex;
  grid-template-columns: auto 1fr;
}
 
.wrapper div{
  width:50%;
  border:2px solid #ccc; 
}

.top{
  float: right;
}

.bottom{
  float: right;
}

Demo: https://stackblitz.com/edit/angular-ivy-ueqfmx?file=src%2Fapp%2Fapp.component.css

>Solution :

You cannot float the child element of a flex container. You need to either use flexbox, or floats. Not both. Other than that, your code works fine

.wrapper {
  width:100%;
  flex-direction: column;
  display:  flex;
  grid-template-columns: auto 1fr;
}
.wrapper div{
  width:50%;
  border:2px solid #ccc; 
}

.col-reversed {
  flex-direction: column-reverse;
}

.row {
  flex-direction: row;
}

.row-reversed {
  flex-direction: row-reverse;
}

<div class="wrapper">
  <div class="top">top</div>
  <div class="bottom">bottom</div>
</div>

<br><br>

<div class="wrapper col-reversed">
  <div class="top">top</div>
  <div class="bottom">bottom</div>
</div>

<br><br>

<div class="wrapper row">
  <div class="top">top</div>
  <div class="bottom">bottom</div>
</div>

<br><br>

<div class="wrapper row-reversed">
  <div class="top">top</div>
  <div class="bottom">bottom</div>
</div>