Column Flow Opposite

Hello Webflow.
@callmevlad @thesergie @brryant

This is a feature I would really like to see in designing with columns:

Add the class .flow-opposite to columns where you want content to display first on mobile but appear on the right on larger screens.

<div class="container">
  <div class="row clearfix">
    <div class="column half flow-opposite">
      <!-- Your Content -->
    </div>
    <div class="column half">
      <!-- Your Content -->
    </div>
  </div>
</div>

@media (min-width: 40rem) {
  .column.flow-opposite { float: right; }
}

Above code and quote taken from: Grid

This would be really PERFECT. Because many times I faced the issue of a 2-column layout where I have an image on the left, which automatically shows on top in mobile view…but somtimes it would be better to show it after the text on mobile view.

Is it possible?

Thanks,
greetings.

1 Like

@rowan, we hear ya, and it’s something that we’ll be working on soon! In Bootstrap, these are called push/pull grid classes, and we’re investigating how to get them to work right with our UI. But it’s absolutely something that we need soon.

1 Like

Cool! Will wait for it :smile:

Did this ever happen? Would be very useful Thanks

It would be an excellent option. This issue happens always we work with 2 columns.

1 Like

Hey, Guys,
just had this issue the other day :slight_smile: Please add this feature, it will be really great!