Here’s a simple solution using Bootstrap.
<div class="container">
<div class="row">
<div class="col-4">
<div class="elem">1</div>
</div>
<div class="col-4">
<div class="elem">2</div>
</div>
<div class="col-4">
<div class="elem">3</div>
</div>
</div>
<div class="row flex-row-reverse">
<div class="col-4">
<div class="elem">4</div>
</div>
<div class="col-4">
<div class="elem">5</div>
</div>
<div class="col-4">
<div class="elem">6</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="elem">7</div>
</div>
<div class="col-4">
<div class="elem">8</div>
</div>
<div class="col-4">
<div class="elem">9</div>
</div>
</div>
</div>
I have a series of “.row” bootstrap elements which are consecutive like below:
<div class="row">
<div class="col-4">
<div class="elem">1</div>
</div>
<div class="col-4">
<div class="elem">2</div>
</div>
<div class="col-4">
<div class="elem">3</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="elem">4</div>
</div>
<div class="col-4">
<div class="elem">5</div>
</div>
<div class="col-4">
<div class="elem">6</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="elem">7</div>
</div>
<div class="col-4">
<div class="elem">8</div>
</div>
<div class="col-4">
<div class="elem">9</div>
</div>
</div>
I want to change the row order every other one dynamically with CSS. Can someone help me?
The desired Output:
I want to reverse the orders Every other row dynamically. suppose that i may have ‘n’ rows. thanks
Question is not clear. Post any jpeg representation of required output.
I know this but my results are generated dynamically so i need a solution in CSS or sth else that could do that dynamically.
As a side note, I strongly recommend this guide that talks about the many wonderful things flexbox can do for you, including reversing order of elements:
