Easy way to swap columns on mobile

Hey barrystrauss,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 767px) { 
  #top.page-id-12 .post-entry-12 .flex_column_table {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #top.page-id-12 .post-entry-12 .flex_column.avia-builder-el-first {
      order: 2 !important; 
  }
  #top.page-id-12 .post-entry-12 .flex_column.avia-builder-el-last {
      order: 1 !important; 
  }
  }

Best regards,
Mike

Hi,
Glad to hear, I agree that an image of the book on top in mobile would be best, but breaking the column with the book image in half and splitting over and under the text column would be very hard, I would recommend adding an image of the book into the same column as the text and then using the screen options to show it only for mobile while hiding the other image the same way. Another option would be to use the same technique for the button under the image, that is to have two buttons and show / hide via screen width.
This can be simple and I would be happy to demonstrate if you provide an admin login in the Private Content area.

Best regards,
Mike