Is there a way to reorder elements in each section on Webflow so that they follow the order of Title, picture, description when viewed on mobile portrait view?

Published on
September 22, 2023

Yes, there is a way to reorder elements in each section on Webflow so that they follow the order of Title, picture, description when viewed on mobile portrait view. Here's how you can achieve this:

  1. Open your Webflow project and navigate to the desired page where you want to reorder the elements.
  2. Enter the Designer view by clicking on the Designer button at the top of the screen.
  3. Identify the section where you want to reorder the elements.
  4. Select the element that you want to move and drag it to the desired position within the section.
  5. Repeat step 4 for each element you want to reorder, making sure to follow the order of Title, picture, description.
  6. After reordering the elements within the section, you need to set up a CSS flexbox to ensure that the elements stack vertically on mobile portrait view.
  7. Select the parent section element that contains the elements you reordered.
  8. In the right sidebar, click on the Layout tab.
  9. Under the Display section, click on the Flex checkbox to enable flexbox layout.
  10. Now, set the Flex Direction to Column. This makes the elements stack vertically.
  11. Repeat steps 6-10 for all the sections where you want to reorder and stack elements in the desired order.

By following these steps, you can easily reorder elements in each section on Webflow and ensure they follow the order of Title, picture, description when viewed on mobile portrait view.

Example Code:

<section class="flex-container">  <div class="title">Title</div>  <div class="picture">Picture</div>  <div class="description">Description</div></section>

Note: You may need to adjust the CSS classes and styles based on your project's requirements and design.

Additional Questions:

  1. How can I reorder elements in a section on Webflow?
  2. How do I stack elements vertically on mobile portrait view in Webflow?
  3. What is CSS flexbox and how can I use it in Webflow?