portfolio not displaying sequentially the order in html

portfolio not displaying sequentially the order in html i have below. it just displaying randomly on browser. displaying second image first, then first, then fourth & then third. any idea how to turn this off. i want to display the thumbnail image in browser html sequence i have in order first, second, thrid & fourth

 <div id="portfolio" class="portfolio grid-container clearfix">
          <!-- First Image-->
          <article class="portfolio-item pf-int">
          <div class="portfolio-image">
            <img src="First.jpg" alt="Overview">
            <div class="portfolio-overlay">
<a href="First.jpg" title="Overview - Midnight" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a> 
            </div>
 
          </div>
 
          <div class="portfolio-desc">
            <span>Overview First</span> 
          </div>
 </article>
 
 
           <!-- Second Image-->
          <article class="portfolio-item pf-int">
          <div class="portfolio-image">
            <img src="Second.jpg" alt="Overview">
            <div class="portfolio-overlay">
<a href="Second.jpg" title="Overview - Midnight" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a> 
            </div>
 
          </div>
 
          <div class="portfolio-desc">
            <span>Overview Second</span> 
          </div>
 </article>
 
 
           <!-- Third -->
          <article class="portfolio-item pf-int">
          <div class="portfolio-image">
            <img src="Third.jpg" alt="Overview">
            <div class="portfolio-overlay">
<a href="Third.jpg" title="Overview - Midnight" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a> 
            </div>
 
          </div>
 
          <div class="portfolio-desc">
            <span>Overview Third</span> 
          </div>
 </article>
 
           <!-- Fourth -->
          <article class="portfolio-item pf-int">
          <div class="portfolio-image">
            <img src="Fourth.jpg" alt="Overview">
            <div class="portfolio-overlay">
<a href="Fourth.jpg" title="Overview - Midnight" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a> 
            </div>
 
          </div>
 
          <div class="portfolio-desc">
            <span>Overview Fourth</span> 
          </div>
 </article>
 
  </div>

i just purchased separate license for new project. great theme. guys
is there fixed for portfolio sorting order. i don't need shuffle/random feature can disable those. but i need portfolio sequence order just like in html need to display in browser.

i have tried isotope({ sortBy : 'original-order' }); by putting just after function.js but that didnt work either

			<script>
    jQuery(window).on( 'load', function(){
       jQuery( '.grid-container' ).isotope({ sortBy : 'original-order' });
		
		   jQuery('#portfolio').isotope({ sortBy: 'original-order' });

i need portfolio gallery sequence of html for ordering display. list of order should original order in html

here is site for test

http://advancedphotolab.com/test/portfolio2.html

Hi Apradhan,

I had a similar problem on a page I am developing right now. I solved it by cutting the out of sequence article bock and pasting it before the other out of sequence block. Apparently as you add more articles it adds the sequence in a different pattern than expected. it wasnt adding them left, left, left sequentially as expected but instead right, left, middle. So I found by experimenting I could change order.

also: I filled up the empty spots with code below and pasted the empty article code to force the order I wanted. This way I was able to move the filled spots where I wanted them.

I probably dont need most of the div code but it worked for me and was a "down and dirty solution". I will clean it up once i have time. But for now its working.

I am sure support will have a more elegant solution - but this was quick- like I said "down and dirty" - just to get the spot filled- until we get the correct code from support.

<!-- spot filler-->
<article class="portfolio-item pf-graphics pf-uielements">
<div class="portfolio-image">
</div>
<div class="portfolio-desc">
<span></span>
</div>
</article>
<!--end of spot filler-->

Hope this helps!

ivanposs. thanks for suggestion. i have tried that "it by cutting the out of sequence article bock and pasting it before the other out of sequence block. "
but since i have between 30-50 images on pages its messing up other sequence when i do that

but on empty spot that might work.

<!– spot filler–>
<article class=”portfolio-item pf-graphics pf-uielements”>
<div class=”portfolio-image”>
</div>
<div class=”portfolio-desc”>
<span></span>
</div>
</article>
<!–end of spot filler–>

well you might want to try this- its a little time consuming but its how I figured out what was happening.

I created a copy of page, then I removed all the article blocks from the original except the 1st one. I proceeded to add back one article block at a time from the copy to monitor exactly what spot was being filled each time. I only had 13 so not too difficult. After a couple of rows, once you see the pattern of fill it will go quickly.

I will be posting my page that I am referring to momentarily and will give you the link to see the final spot. Its not "officially" live yet so I have no live links to it.

Maybe support can tell you the fill pattern.