Unfold Portfolio Viewer Information?


I’ve had some difficulty reordering the items of the Portfolio Viewer (index.html) of the Unfold Website Template.

It appears there is some back-end logic that’s overriding the order that I place them in on the page (so moving the div closer to the top of the portfolio container doesn’t display the div contents before the other divs in the portfolio viewer).

Could I get some help understanding what the following Bolded components mean? I’m now assuming that to reorder the parts of the portfolio in visual space (i.e. move image from the first row to the last row) I need to know a specific ordering code within the div properties - but it’s not “data-id”…

<div class="**item web packaging col-sm-6 col-md-6 col-lg-4 isotope-mb-2**">
                <a href="portfolio-shirts.html" class="portfolio-item **ajax-load-page** **isotope-item** gsap-reveal-img" **data-id**="5">


Hi there

I need more information on this, please provide URL of the page and steps to replicate your problem, screenshot also would be a good thing.


Thanks for the quick reply. No problem.

Here’s a live link: http://nxtgraphics.com.

And a picture that shows that in the live website now, the T-shirt entry appears before the Album Artwork, while the code shows they should be in reverse order.

If I copy the following line of code and paste it a number of times within the portfolio container (to use as a template to create other entries in the portfolio container), the new entries appear, but not in the location where the code is placed:

<div id="posts" class="row gutter-isotope-item">
              <div class="item web branding col-sm-6 col-md-6 col-lg-4 isotope-mb-2">
                <a href="images/Small-Portfolio/Photography/NDF_3642.jpg" class="portfolio-item isotope-item gsap-reveal-img" data-fancybox="gallery" data-id="1">
                    <div class="overlay">
                      <span class="wrap-icon icon-link2"></span>
                      <div class="portfolio-item-content">
                        <h3>Firefly Forest</h3>
                        <p>experimental photography</p>
                    <img src="images/Small-Portfolio/Photography/NDF_3642.jpg" class="lazyload  img-fluid" alt="Images" />