How to?: FW View: Text CTA left | Image right. Mobile: Image ABOVE Text CTA

Beaver Builder
1

I can’t figure which module or setting will allow the type of layout change shown on this
page: http://sites.layerswp.com/coffee/

Specifically the row with the “Learn to Brew” CTA how it swaps positions on mobile view.

This is a fairly common pattern so I’m assuming I am just missing something obvious.

Thanks!

2

Hey Dimitry,

We don’t really have a module that does those out of the box. What you can do though, is you can create 2 rows for that specific section. Style the first one for desktop view, and the other for mobile view. Then set the first one to show only on Large and Medium devices, the second one to show only on Small devices. This can be set under the Advanced tab for each row. :slight_smile:

Or you can do it via custom CSS. We can reverse their order on mobile view. Simply add an extra class to the row/column you want this to apply. In the code below, the class added is reverse-order-mobile.

@media (max-width: 768px) {
  .reverse-order-mobile .fl-col-group {
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .reverse-order-mobile .fl-col:nth-of-type(1) { order: 12; }
  .reverse-order-mobile .fl-col:nth-of-type(2) { order: 11; }
  .reverse-order-mobile .fl-col:nth-of-type(3) { order: 10; }
  .reverse-order-mobile .fl-col:nth-of-type(4) { order: 9; }
  .reverse-order-mobile .fl-col:nth-of-type(5) { order: 8; }
  .reverse-order-mobile .fl-col:nth-of-type(6) { order: 7; }
  .reverse-order-mobile .fl-col:nth-of-type(7) { order: 6; }
  .reverse-order-mobile .fl-col:nth-of-type(8) { order: 5; }
  .reverse-order-mobile .fl-col:nth-of-type(9) { order: 4; }
  .reverse-order-mobile .fl-col:nth-of-type(10) { order: 3; }
  .reverse-order-mobile .fl-col:nth-of-type(11) { order: 2; }
  .reverse-order-mobile .fl-col:nth-of-type(12) { order: 1; }
}

Let us know how it goes! :slight_smile:

Ben